Топ плагинов jQuery. Плагин fancyBox
Опубликовано: 08.10.2017
От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов 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 используемого плагина. Теперь давайте вызовем нужный метод: