В этом примере будем создавать фото галерею которая будит выводить на показ все изображения из определённой папки, и осуществляться это будит с помощью PHP, CSS, JQuery и jQuery Lightbox плагин .
Шаг-1 Начнём мы с XHTML.
demo.php
Красивая Фото галерея
Шаг-2
Теперь пришло время PHP
Именно с его помощью сканируется и вытаскиваются все изображения из определённой папки, что само собой облегчает добавление картинок, скопировал в папку и всё они в галереи.
$directory = 'gallery'; //название папки где изображений находятся $allowed_types=array('jpg','jpeg','gif','png'); //Типы изоброжений $file_parts=array(); $ext=''; $title=''; $i=0; //Открываем каталог $dir_handle = @opendir($directory) or die("Ошибка при открытии каталога с изображениями !"); 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'; //Каждому изображению присваивается CSS class "nomargin" echo ' '.$title.' '; $i++; } } closedir($dir_handle); // закрыть каталог
Шаг-3
Файл CSS
/* Значения некоторых элементов для совместимости браузеров */ body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; } body{ /* Общий стиль страницы */ margin-top:20px; color:white; font-size:13px; background-color:#222222; } .clear{ clear:both; } a, a:visited { /* a:visited необходимо для нормальной работы в IE6 */ color:#00BBFF; text-decoration:none; outline:none; } a:hover{ /* Эффект при наведении */ text-decoration:underline; } #container{ /* Основной Div контейнер */ width:890px; margin:20px auto; } #heading,#footer{ /* верхний и нижний колонтитул */ background-color:#2A2A2A; border:1px solid #444444; height:20px; padding:6px 0 25px 15px; margin-bottom:30px; overflow:hidden; } #footer{ height:10px; margin:20px 0 20px 0; padding:6px 0 11px 15px; } div.nomargin{ /* наш специальный класс nomargin */ margin-right:0px; } .pic{ /* Это класс div контейнера в котором выводиться изоброжения */ float:left; margin:0 15px 15px 0; border:5px solid white; width:200px; height:250px; } .pic a{ /* */ width:200px; height:250px; text-indent:-99999px; display:block; /* Не забывайте, что ширина и высота гиперссылок бесполезны без display:block */ } h1{ /* Стиль заголовка */ font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; } h2{ /*стиль текста в footer */ font-weight:normal; font-size:14px; color:white; }
Шаг-5 JQuery
Для подключения JQuery библиотеки и плагина Lightbox, используется следующий код в тегах в файл demo.php
Первая стока подключает CSS файл плагина Lightbox. В второй строке подключаем наш собственный css. Далее подключается библиотека JQuery CDN Google, сам плагин Lightbox и наш собственный script.js файл.
Щаг-6
script.js
// Начать работу только после полной загрузки $(document).ready(function(){ $('.pic a').lightBox({ imageLoading: 'lightbox/images/loading.gif', imageBtnClose: 'lightbox/images/close.gif', imageBtnPrev: 'lightbox/images/prev.gif', imageBtnNext: 'lightbox/images/next.gif' }); });
Вот и весь пример
Шаг-2
Теперь пришло время PHP
Именно с его помощью сканируется и вытаскиваются все изображения из определённой папки, что само собой облегчает добавление картинок, скопировал в папку и всё они в галереи.