Функциональная галерея на PHP и jQuery

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

Первым делом создаем костяк нашей галереи:

<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'
 });
});

Тут мы просто подключаем несколько изображений для правильной работы лайтбокса.

Наша галерея готова! Мне нравится! :)