qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Галерея на PHP

Галерея на PHP и Jquery
Просмотров: 3261  Скачан: 417 раз  Комментариев в теме: 0

Отличная галерея созданная с помошью php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться самим прописывать в html разметке пути к картинкам (если конечно не прибегать к помощи js и т.д), в последствии прописанные вами картинки, будут благополучно выводиться в галерее. В этой же галерее, вам этого делать не придётся, за вас все сделает php скрипт, вам лишь нужно закинуть все желаемые картинки в нужную папку, и наслаждаться работой галереи.

Шаг 1 - создание разметки

 

HTML

<div id="container">
    <div id="gallery">
        <?php
            $directory = 'images/gallery';
            $allowed_types=array('jpg','jpeg','gif','png');
            $file_parts=array();
            $ext='';
            $title='';
            $i=0;
            $dir_handle = @opendir($directory) or die("There is an error with your image directory!");
            while ($file = readdir($dir_handle))
            {
                if($file=='.' || $file == '..') continue;
                $file_parts = explode('.',$file);
                $ext = strtolower(array_pop($file_parts));
                $title = implode('.',$file_parts);
                $title = htmlspecialchars($title);
                $nomargin='';
                if(in_array($ext,$allowed_types))
                {
                    if(($i+1)%4==0) $nomargin='nomargin';
                    echo '
                    <div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 20% 20%;">
                        <a href="'.$directory.'/'.$file.'" title="'.$title.'" target="_blank">'.$title.'</a>
                    </div>';
                    $i++;
                }
            }
            closedir($dir_handle);
        ?>
        <div class="clear"></div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.pic a').lightBox({
        imageLoading: 'images/loading.gif',
        imageBtnClose: 'images/close.gif',
        imageBtnPrev: 'images/prev.gif',
        imageBtnNext: 'images/next.gif'
    });
});
</script>
Материалы по теме:

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

Галерея на jQueryГалерея на jQuery

В галерее используется потрясающий эффект раскрытия картинки, когда вы нажимаете на картинку, она как бы собирается по......

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

Full Page Image GalleryFull Page Image Gallery

Красивая галерея для вашего сайта на css и JQuery, если вам нужна красивая галерея и вам хочется, что-то необычное......

Full галерея на jQueryFull галерея на jQuery

Отличная галерея созданная с помощью Jquery и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с......
Интересные публикации:

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

Скроллер картинокСкроллер картинок

Красивый скроллер для вашего сайта, имеет возможность прокручиваться как в левую сторону, так и в правую......

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню на cs...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...
  • Текущий 1.11/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.1/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить