От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. На очереди у нас еще один плагин, реализующий эффект а-ля Lightbox – это плагин fancyBox. Очень мощный и удобный плагин модальных окон для контента, мимо которого пройти просто невозможно.
Итак, давайте рассмотрим примеры работы с плагином fancyBox – одним из лучших в своем роде и, пожалуй, моим самым любимым плагином лайтбокс, поскольку его я использую практически в каждом своем проекте.
Официальный сайт fancyBox предлагает нам отличную документацию со множеством примеров, которые показывают, как открывать в модальном окне лайбокс различные варианты контента: одиночное фото, группу изображений, видео, флеш, фрейм, Google карты, подгружать контент с помощью AJAX и т.д. Как видим, плагин действительно мощный.
Скачаем актуальную версию fancyBox (версия 2.1.5 на момент написания статьи) и подключим его файлы.
|
1 2 3 |
<link rel="stylesheet" href="fancybox/jquery.fancybox.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="fancybox/jquery.fancybox.pack.js"></script> |
Это обязательные файлы, остальные файлы плагина являются опциональными. Теперь давайте добавим лайтбокс эффект для одиночной картинки. Разметка может быть примерно такой:
|
1 |
<a href="images/1.jpg" class="fancybox"><img src="images/1_s.jpg" alt=""></a> |
Для ссылки на оригинальное (большое) изображение мы установили класс fancybox, по которому и будем формировать коллекцию jQuery и вызывать метод fancybox используемого плагина. Теперь давайте вызовем нужный метод:
|
1 2 3 |
$(function() { $(".fancybox").fancybox(); }); |
Теперь при клике по миниатюре в модальном окне будет показано оригинальное изображение. При этом появление изображение будет сопровождаться приятной анимацией.
Также fancyBox позволяет группировать картинки, создавая галереи, для этого достаточно добавить группируемым картинкам атрибут rel с одинаковым значением. Давайте добавим еще несколько изображений и объединим их в группу.
|
1 2 3 4 |
<a href="images/1.jpg" rel="group" class="fancybox"><img src="images/1_s.jpg" alt=""></a> <a href="images/2.jpg" rel="group" class="fancybox"><img src="images/2_s.jpg" alt=""></a> <a href="images/3.jpg" rel="group" class="fancybox"><img src="images/3_s.jpg" alt=""></a> <a href="images/4.jpg" rel="group" class="fancybox"><img src="images/4_s.jpg" alt=""></a> |
Теперь при открытии любой картинки мы будем видеть стрелки влево и вправо, которые позволяют переключаться между изображениями.
Кстати, существенным плюсом fancyBox является его адаптивность. Можете попробовать ресайзить окно браузера – плагин будет автоматически подстраиваться под размеры окна.
Для каждой картинки можно добавлять подпись, которая будет показана под изображением. Делается это через атрибут title для ссылки:
|
1 |
<a href="images/1.jpg" rel="group" class="fancybox" title="Закат на природе"><img src="images/1_s.jpg" alt=""></a> |
Ну и, конечно же, плагин предлагает нам множество опций, используя которые, мы можем настраивать fancyBox под себя: менять эффект анимации, оформление, события и другое.
На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
Комментарии (2)