Сегодня расскажу о еще одной великолепной галерее – 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/...&hl=en&fs=1"></param> <param name="allowFullScreen" value="true"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/...&hl=en&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
});
Согласитесь, действительно хорошая галерея, правда?
