Сегодня расскажу о еще одной великолепной галерее – jQuery FancyBox. Тем более, что в последней версии фотогалереи LightBox разработчики вырезали поддержку IE6 (с чем я в общем полностью согласен – надо жалеть разработчиков и обновлять программное обеспечение). Но поскольку не всем это понравится, я обещал подробно рассказать о какой-нибудь другой фотогалерее для jQuery, что с удовольствием и делаю.
Как всегда, сначала пример работы, который на этот раз придется продемонстрировать в новом окне. Надеюсь, что многие оценят возможность отображать не только картинки, но и какой-либо контент, находящийся на странице – например видеоролики с YouTube. А как Вам возможность выводить вообще любой контент в iframe? Или спрятать за одной миниатюрой целую галерею фотографий? Смотрите, испытывайте, а потом будем разбираться как заставить все это работать на своем сайте.

Нужные файлы (включая демонстрационные фото), Вы сможете найти в этом архиве. Сам плагин jquery.fancybox.js, дополнительные js-файлы и библиотеку jQuery можно найти в разделе Download.

Итак приступим: для начала нам потребуется подключить к нашей HTML-странице как минимум два js-файла: jquery-1.2.6.js (библиотека jQuery) и jquery.fancybox.js (плагин FancyBox). Или четыре – jquery.pngFix.js позволит устранить проблему использования png-файлов в IE, а jquery.metadata.js позволит Вам использовать атрибуты class для передачи параметров плагину (впрочем можно обойтись и без этого файла). Сделаем это в разделе HEAD. Не забудем и про файл стилевого оформления, как и про то, что пути у Вас могут отличаться от приведенных в примере…

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox.css" />

Теперь о HTML-разметке. Начнем с традиционного варианта использования фотогалереи – отобразим все миниатюры, при клике на которых будет открываться полноразмерное изображение и к нему добавятся элементы управления для перемещения назад и вперед. Я приведу пример, но Вы можете использовать такую разметку, которая нравится Вам.

<ul id="gallery">
  <li>
    <a href="/example_jquery/fancybox_img/01.jpg" rel="fancy-tour" title="Россия - Греция 1 : 0">
      <img src="/example_jquery/fancybox_img/01m.jpg" />
    </a>
  </li>
  <li>
    <a href="/example_jquery/fancybox_img/02.jpg" rel="fancy-tour" title="Великий Гус...">
      <img src="/example_jquery/fancybox_img/02m.jpg" />
    </a>
  </li>
  <li>
    <a href="/example_jquery/fancybox_img/03.jpg" rel="fancy-tour" title="Это был наш день...">
      <img src="/example_jquery/fancybox_img/03m.jpg" />
    </a>
  </li>
  <li>
    <a href="/example_jquery/fancybox_img/04.jpg" rel="fancy-tour" title="Россия - Голландия 3 : 1">
      <img src="/example_jquery/fancybox_img/04m.jpg" />
    </a>
  </li>
</ul>

Картинка-миниатюра заключена в тэг А, который ссылается на полноразмерное изображение. Обратите внимание на атрибут rel тэга А – одинаковые значения означают принадлежность в одной группе изображений, ведь на одной странице Вы можете расположить их и не одну… А значение тэга title используется для вывода комментария к картинке.
В своем примере я использую несколько CSS-правил, чтобы вытянуть список по горизонтали и убрать рамки картинок.

ul {
  list-style:none;
}
ul li {
  display:inline;
}
a img {
  border:none;
}

Теперь о js-коде. Если использовать все значения по умолчанию, то проще не бывает:

$(document).ready(function(){
  $("#gallery a").fancybox();
});

Т.е. мы просто отбираем все нужные нам элементы А и передаем этот набор плагину jQuery FancyBox, который проделывает всю остальную работу. Но можно использовать и дополнительные опции, например вот так:

$(document).ready(function(){
  $("#gallery a").fancybox({
    	overlayShow: true,
    	overlayOpacity: 0.5,
    	zoomSpeedIn: 1500,
    	zoomSpeedOut:600
    });
});

Ниже я привожу весь список доступных опций.
hideOnContentClick – скрывать контент по клику на полноразмерном изображении. Может принимать значения true или false. По умолчанию false.
zoomSpeedIn – указывается скорость эффекта (в миллисекундах) при открытии полноразмерного изображения. По умолчанию – 0, т.е. без эффекта.
zoomSpeedOut – указывается скорость эффекта (в миллисекундах) при закрытии полноразмерного изображения. По умолчанию – 0, т.е. без эффекта.
overlayShow – показывать или нет дополнительный слой, который «затемняет» основное содержимое страницы. Может принимать значения true или false. По умолчанию false.
overlayOpacity – прозрачность для overlayShow, если конечно он true. Изменяется от 0 до 1.
frameWidth – определяет ширину контейнера, если выводится iframe и inline содержимое (см. примеры).
frameHeight – определяет высоту контейнера, если выводится iframe и inline содержимое (см. примеры).
itemLoadCallback – определяет пользовательскую функцию, которая выбирает группу фотографий для отображения (см. пример).

А теперь попробуем «спрятать» за одной миниатюрой целый набор полноразмерных изображений. Вот HTML-разметка для одной миниатюры.

<a id="custom" href="javascript:;><img src="/example_jquery/fancybox_img/05m.jpg" alt="" /></a>

Ничего необычного тут нет – даже и пояснять нечего… Самое главное тут в js-коде, который мы и разберем подробнее.

var imageList = [
  {
    url: "/example_jquery/fancybox_img/05.jpg",
    title: "Первая картинка"
  },
  {
    url: "/example_jquery/fancybox_img/05-1.jpg",
    title: "Вторая картинка"
  },
  {
    url: "/example_jquery/fancybox_img/05-2.jpg",
    title: "Третья картинка"
  },
  {
    url: "/example_jquery/fancybox_img/05-3.jpg",
    title: "Четвертая картинка"
  }
];

Мы создаем массив imageList, каждым элементом которого является объект, состоящий из пар ключ/значение. Конечно все уже поняли, что url указывает на размещение полноразмерного изображения, а title – конечно же содержит комментарий к нему. В этом массиве и «прячутся» все большие фотографии.

Теперь определим функцию, которая будет получать эту группу фотографий:

function getGroupItems(opts) {
  jQuery.each(imageList, function(i, val) {
    opts.itemArray.push(val);
  });
}

Нам осталось только передать плагину fancybox необходимый параметр:

$("#custom").fancybox({
  itemLoadCallback: getGroupItems
});

Разберем как вывести в галерею некий контент, находящийся на странице и до поры скрытый, а в качестве примера используем видеоролики с YouTube.

<div style="display:none" id="tesvideo">
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/...&amp;hl=en&amp;fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/...&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="425" height="344"></embed>
</object>
</div>

Обратите внимание, чтобы картинка-крестик, по щелчку на котором закрывается галерея, была «выше» собственно содержимого, в код надо внести небольшие изменения добавив параметр wmode со значением transparent.
Осталось показать только js-код:

$("#video").fancybox({
  zoomSpeedIn: 0,
  zoomSpeedOut:0,
  frameWidth: 425,
  frameHeight: 344
});

Ну, и напоследок – вывод в галерею вообще любого содержимого через iframe. Вот простенький HTML:

<a id="frame" href="http://www.google.ru/"><img src="/example_jquery/fancybox_img/08m.jpg" alt="" /></a>

и javascript-код:

$("#frame").fancybox({
  zoomSpeedIn: 0,
  zoomSpeedOut:0,
  frameWidth: 800,
  frameHeight: 600
});

Согласитесь, действительно хорошая галерея, правда?

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal