Этот урок покажет Вам как создать галерею, которая сама будет находить картинки в папке и отображать их с помощью лайтбокса.
Первым делом создаем костяк нашей галереи:
<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> <!-- закрывающий 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 '
<div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%;">
<a href="'.$directory.'/'.$file.'" title="'.$title.'" target="_blank">'.$title.'</a>
</div>';
$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 rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css">
<link rel="stylesheet" type="text/css" href="demo.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'
});
});
Тут мы просто подключаем несколько изображений для правильной работы лайтбокса.
Наша галерея готова! Мне нравится! :)