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

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

</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

Другие темы: