Продолжаем изучать jQuery. Сегодня речь пойдет больше не про него самого, а про возможности, которые дает этот фреймворк и как его используют для создания различный эффектов. Я предлагаю изучить плагин, который позволяет создавать просмотр картинок на сайте (увеличение) и создавать галереи. Думаю, вы не раз сталкивались с ним на различных сайтах. Перейдем к описанию.
FancyBox
Плагин к фреймворку jQuery. Позволяет организовывать на своем сайте просмотр изображений в стиле мак ос – “lightbox”, а так же организовывать галереи из изображений. Для начала нужно скачать архив с сайта GoogleCode. В архиве можно посмотреть уже готовый пример. Нас же интересует папка jquery.fancybox. В ней находятся файлы ресурсов, несколько скриптов: сам FancyBox и библиотека jQuery. То есть, вам даже не придется отдельно скачивать jQuery и наоборот, если на странице он уже подключен, этот файл можно удалить. Теперь заливаем папку на свой сайт и подключаем библиотеки к странице следующим образом:
<script type="text/javascript" src="../jquery.fancybox/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../jquery.fancybox/jquery.easing.1.3.js"></script> <script type="text/javascript" src="../jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
Не забываем так же подключить css файл стилей FancyBox.
<link rel=”stylesheet” type=”text/css” href=”../jquery.fancybox/jquery.fancybox.css” media=”screen” />
Дальше, пишем скрипт, указывая jQuery, что элементы типа <a> будет обрабатывать FancyBox.
<script type="text/javascript">
$(document).ready(function() {
$("a").fancybox();
});
</script>
Ждем, когда загрузятся все DOM элементы и назначаем обработчик.
Теперь перейдем непосредственно к изображениям. Вставляем одиночное маленькое изображение с ссылкой на изображение большего размера.
<a title="Название изображения" href="1_b.jpg"><img src="1_s.jpg" /></a>
Обратите внимание на title, то что вы здесь напишите, позже будет изображено внизу изображения большего размера. В стандартном примере это выглядит так:
Теперь организуем галерею и последовательный просмотр для нее. Добавляем группу изображений:
<a rel="group" title="Групповое изображение #1" href="2_b.jpg"><img src="2_s.jpg" /></a> <a rel="group" title="Групповое изображение #2" href="3_b.jpg"><img src="3_s.jpg" /></a> <a rel="group" href="4_b.jpg"><img src="4_s.jpg" /></a>
Как вы наверное заметили, чтобы FancyBox понял, что изображения составляют галерею и позволял переключаться между ними, достаточно добавить к ссылке атрибут rel со значением group. В приведенном выше примере два изображения будут с подписью, а третье соответственно нет.
Ну и несколько дополнений – в файле jquery.fancybox.css можно настроить параметры отображения плагина, например цвет фона, когда показывается большая картинка или сделать отображение не на весь экран.
Пример можно посмотреть здесь.
