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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree