Fancybox 3 это универсальный плагин, использующий возможности библиотеки jQuery для быстрой вставки медиа-контента на сайте в виде галереи. В этом материале рассмотрим, как вставить картинки в галерею.
Fancybox 3 это универсальный плагин, использующий возможности библиотеки jQuery для быстрой вставки медиа-контента на сайте в виде галереи. В этом материале рассмотрим, как вставить картинки в галерею.
Подключение и инициализация Fancybox в 3 шага
Шаг 1) Добавьте на HTML страницу перед закрывающим тегом head ссылку на CSS файл плагина.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
Шаг 2) Добавьте на HTML страницу перед закрывающим тегом body ссылку на последнюю версию библиотеки jQuery и плагин Fancybox 3.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
Шаг 3) Для инициализации Fancybox добавьте в внутри каждой ссылки на картинку специальный атрибут data-fancybox="gallery". Кроме того создайте уменьшенные версии больших картинок.
<a href="picture_1.jpg" data-fancybox="gallery">
<img src = "preview_1.jpg" alt ="picture 1">
</a>
<a href="picture_2.jpg" data-fancybox="gallery">
<img src = "preview_2.jpg" alt ="picture 2">
</a>
Можно сколько угодно добавлять картинок в галерею. При первом клике по превью изображению, откроется его большая версия и сразу можно по стрелочке переходить на следующую картинку, до тех пор пока не закончатся картинки в галереи.
Посмотреть demo на CodePen
Атрибут data-fancybox
Если указать просто атрибут data-fancybox без значения gallery, то каждая картинка будет открываться в отдельном окне, как одна единственная в галерее.
<a href="picture_1.jpg" data-fancybox>
<img src = "preview_1.jpg" alt ="picture 1">
</a>
Посмотреть demo на CodePen
Создание нескольких галерей Fancybox
На одном большом лендинге может быть больше, чем одна галерея. Поэтому для создания нескольких галерей нужно задать уникальные значения для атрибута data-fancybox. Изображения из разных галерей листаются в пределах только своих галерей.
// Первая галерея
<a href="picture.jpg" data-fancybox="first_gallery">
<img src = "preview.jpg" alt ="picture">
</a>
// Вторая галерея
<a href="photo.jpg" data-fancybox="second_gallery">
<img src = "photo.jpg" alt ="photo">
</a>
Пример вставки видео Fancybox
Так же с Fancybox можно просматривать видео, указав URL ролика с YouTube. Встроенный видеоплеер HTML5 воспроизводит видео в формате MP4.
<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
<img src="video_thumb.jpg">
</a>
Посмотреть demo на CodePen
Модальное окно с Fancybox
C Fancybox удивительно легко реализовать появление по клику любого HTML-элемента на странице (модальное окно), предварительно скрыв его. Сначала создайте скрытый элемент с уникальным идентификатором.
// HTML
<div id="hidden-window">
<h2>Привет!</h2>
<p>Я модальное окно.</p>
</div>
// CSS
#hidden-window {
display: none;
}
Затем просто создайте ссылку, имеющая значение в data-src атрибуте выше созданный уникальный идентификатор #hidden-window.
<a data-fancybox data-src="#hidden-window">
Кнопка (триггер)
</a>
Посмотреть demo на CodePen
Итоги
Хорошо освоив все основные возможности библиотеки Fancybox, начинающий верстальщик уже можно легко брать заказы на верстку с реализацией всевозможных галерей и модальных окон.
