Топ плагинов jQuery. Плагин fancyBox

Топ плагинов jQuery. Плагин fancyBox

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. На очереди у нас еще один плагин, реализующий эффект а-ля Lightbox – это плагин fancyBox. Очень мощный и удобный плагин модальных окон для контента, мимо которого пройти просто невозможно.

Итак, давайте рассмотрим примеры работы с плагином fancyBox – одним из лучших в своем роде и, пожалуй, моим самым любимым плагином лайтбокс, поскольку его я использую практически в каждом своем проекте.

Официальный сайт fancyBox предлагает нам отличную документацию со множеством примеров, которые показывают, как открывать в модальном окне лайбокс различные варианты контента: одиночное фото, группу изображений, видео, флеш, фрейм, Google карты, подгружать контент с помощью AJAX и т.д. Как видим, плагин действительно мощный.

Скачаем актуальную версию fancyBox (версия 2.1.5 на момент написания статьи) и подключим его файлы.

<link rel="stylesheet" href="fancybox/jquery.fancybox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.pack.js"></script>

Это обязательные файлы, остальные файлы плагина являются опциональными. Теперь давайте добавим лайтбокс эффект для одиночной картинки. Разметка может быть примерно такой:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
<a href="images/1.jpg" class="fancybox"><img src="images/1_s.jpg" alt=""></a>

Для ссылки на оригинальное (большое) изображение мы установили класс fancybox, по которому и будем формировать коллекцию jQuery и вызывать метод fancybox используемого плагина. Теперь давайте вызовем нужный метод:

$(function() {
 $(".fancybox").fancybox();
});

Теперь при клике по миниатюре в модальном окне будет показано оригинальное изображение. При этом появление изображение будет сопровождаться приятной анимацией.

Топ плагинов jQuery. Плагин fancyBox

Также fancyBox позволяет группировать картинки, создавая галереи, для этого достаточно добавить группируемым картинкам атрибут rel с одинаковым значением. Давайте добавим еще несколько изображений и объединим их в группу.

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

Теперь при открытии любой картинки мы будем видеть стрелки влево и вправо, которые позволяют переключаться между изображениями.

Топ плагинов jQuery. Плагин fancyBox

Кстати, существенным плюсом fancyBox является его адаптивность. Можете попробовать ресайзить окно браузера – плагин будет автоматически подстраиваться под размеры окна.

Для каждой картинки можно добавлять подпись, которая будет показана под изображением. Делается это через атрибут title для ссылки:

<a href="images/1.jpg" rel="group" class="fancybox" title="Закат на природе"><img src="images/1_s.jpg" alt=""></a>

Топ плагинов jQuery. Плагин fancyBox

Ну и, конечно же, плагин предлагает нам множество опций, используя которые, мы можем настраивать fancyBox под себя: менять эффект анимации, оформление, события и другое.

На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree