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

Опубликовано: 08.10.2017

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

Топ 3 Слайдера на jQuery. BxSlider, FlexSlider, Slick Slider на практике.

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



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

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


Создание слайдера при помощи плагинов jQuery

Скачаем актуальную версию 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>

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...

Узнайте все о современных технологиях в веб-разработке

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

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

rss