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

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

ОБСУЖДЕНИЕ

Галерея на PHP

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

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

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

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

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

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

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

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

ClockerClocker

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

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

Красивое горизонтальное меню, используется изображения и анимация текста....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

Контактная форма (дизайн)Контактная форма (дизайн)

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

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......
  • Текущий 1.14/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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