Как быстро сделать галерею без установки сторонних модулей и плагинов на популярных CMS. Простой и красивый способ отображения изображений, галереи и модальных окон с помощью библиотеки jQuery – Fancybox.

Простая галерея для сайта Fancybox

Fancybox это универсальный плагин, использующий возможности библиотеки jQuery, чтобы быстро вставить медиа-контент на сайте в виде красивой и функциональной галереи.

Преимущества галереи Fancybox:

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

Установка галереи

Добавляем на HTML страницу перед закрывающим тегом head ссылку на CSS файл плагина.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

И перед закрывающим тегом 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>

Если не нужно использовать галерею на всех страницах сайта или нет возможности добавить код между тегом head и body, то просто вставьте с помощью вашего редактора кода на нужной странице в любое место.

Вставляем галерею

Чтобы вставить галерею 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>

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

Пример Fancybox 4 по ссылке https://fancyapps.com/docs/ui/fancybox#quick-demo

Полезные дополнения

Несколько галерей на одной странице. Для атрибута 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>

Вставка видео с YouTube. Fancybox может открыть видео, для этого укажите URL-адрес ролика с YouTube.

<a data-fancybox href="https://www.youtube.com/watch?v=M-b4pWQL7vs"> <img src="/video_thumb.jpg"> </a>

Модальное окно. С 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" href="javascript:;"> Нажми на меня! </a>

В статье представлена 3 версия Fancybox, на официальном сайте вы найдете актуальную версию и документацию https://fancyapps.com/docs/ui/quick-start#installation