Этот урок покажет Вам как создать галерею, которая сама будет находить картинки в папке и отображать их с помощью лайтбокса.
Первым делом создаем костяк нашей галереи:
</pre> <div id="container"> <div id="heading"> <!-- Заголовок --> <h1>A cool jQuery gallery</h1> </div> <div id="gallery"><!-- это блок для изображений --> <!--?php //здесь идет PHP код ?--> <div class="clear"></div> <!-- using clearfix --></div> <div id="footer"><!-- футер --></div> </div> <pre> <!-- закрывающий div -->
PHP
Идея очень проста — PHP скрипт будет сканировать папку на наличие изображений. После этого эти изображения с помощью CSS & jQuery будут превращаться в красивую галерею. Пользоваться подобной галерей очень просто — достаточно только загрузить картинки в папку и результат сразу будет виден на странице.
$directory = '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'; //последнему изображению в ряде присваивается CSS класс "nomargin" echo '</pre> <div class="pic '.$nomargin.'" style="background: url('\'.$directory.\'/\'.$file.\'') no-repeat 50% 50%;"><a title="'.$title.'" href="'.$directory.'/'.$file.'" target="_blank">'.$title.'</a></div> <pre> '; $i++; } } closedir($dir_handle); //закрыть папку
Сканируя файлы папки и пропуская файлы не изображения, у нас накапливается XHTML код для каждого изображения. Код (линии 28-39) состоит из контейнера с классом pic (и в некоторых случаях nomargin). С помощью атрибута style мы устанавливаем фоновое изображение в виде нашего изображения. Мы позиционируем картинку в центре, используя50% 50%. Таким образом изображение выравнивается как по горизонтали, так и по вертикали. Если изображение больше блока, мы видим только центральную его часть (ту часть, которая помещается в контейнер). Таким образом, у нас получаются красивые миниатюры (без необходимости уменьшение самого изображения).
Это хорошо работает с «нетяжелыми» изображениями. Постарайтесь, не загружать в папку 10 мегапиксельные фото .
В блоке находится ссылка, которая ведет к полноразмерному изображению. Название файла служит значением атрибута title. Плагин lightBox использует эти значения и преобразует картинки в галерею. Чтобы изменить описание изображения, необходимо его переименовать.
У Вас может возникнуть вопрос по поводу класса nomargin! Для чего он нам нужен? У каждого изображения в галерее есть правый и нижний отступ. Это означает, что последний элемент в каждом ряду не сможет выравняться с правой частью заголовка блока. Это выглядит непрофессионально. Поэтому мы присваиваем специальный класс, который убирает правый отступ для последнего элемента в ряду. В итоге, мы получаем красивый результат.
CSS
Теперь давайте все немного оформим:
/* first reset some of the elements for browser compatibility */ 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{ /* body */ margin-top:20px; color:white; font-size:13px; background-color:#222222; } .clear{ /* clearfix класс */ clear:both; } a, a:visited { color:#00BBFF; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } #container{ 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{ 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; } h1{ font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; } h2{ font-weight:normal; font-size:14px; color:white; }
jQuery
Для правильной работы нам понадобится в шапке документа подключить фреймворк, таблицу стилей и вспомогающие скрипты:
<link href="lightbox/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" /> <link href="demo.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script> <script type="text/javascript" src="script.js"></script>
Еще немного:
// после загрузки страницы $(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' }); });
Тут мы просто подключаем несколько изображений для правильной работы лайтбокса.
Вот и все галерея готова!
Источник урока: ruseller.com