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

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

ОБСУЖДЕНИЕ

Галерея на PHP

Галерея на PHP и Jquery
Просмотров: 2690  Скачан: 375 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

Full Page Image GalleryFull Page Image Gallery

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

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией на css...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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