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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

jQuery: основы

Изучите jQuery с нуля!

Смотреть

Метки:

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

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

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

Комментарии (2)

  1. kostikovmu

    То что он платный для коммерческих проектов не написали.

    • Андрей

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

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