RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

Галерея на PHP

Галерея на PHP и Jquery
Просмотров: 2940  Скачан: 399 раз  Комментариев в теме: 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 и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с......

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

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

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

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

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

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

Full Page Image GalleryFull Page Image Gallery

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

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

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

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

Футер на cssФутер на css

Красивый и в тоже время довольно оригинальный футер на css, он же подвал сайта....

DeTube v1.3DeTube v1.3

DeTube - отличная wordpress тема для тех кто хочет сделать видео-портал, блог или журнал видео новостей....

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

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

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

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

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


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