Как подключить к сайту галерею Fancybox

Если вы хотите, чтобы при нажатии на изображения они крупно открывались в галерее с перелистыванием, зумом и миниатюрами — на Taptop это можно сделать с помощью библиотеки Fancybox. Расскажем, как этого добиться за три простых шага.

Шаг 1: Добавьте класс картинке

Начнём с самого важного — подготовки элементов. Код работает с виджет Image, причем не важно, внутри какой структуры он находится. То есть вы можете просто добавить изображения в Div-блок, или использовать виджеты List и Blocklist – галерея будет работать в обоих случаях.

После того как добавили изображения — добавьте им класс fancy-box в поле Источники стилей на правой панели. С помощью класса мы указываем скрипту, какие именно изображения нужно превращать в галерею.

Добавьте класс fancy-box для Image

Шаг 2: Подключите стили и скрипты Fancybox

Теперь перейдите в Настройки страницы → Пользовательский код → Внутри тега <head>. Вставьте туда следующий код:

<!-- CSS Fancybox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<!-- jQuery + Fancybox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

В нем находятся стили, которые отвечают за внешний вид галереи, и библиотека со скриптом.

Вставьте код в блок Внутри тега <head>

Шаг 3: Добавьте скрипт инициализации

Теперь пролистайте чуть ниже и перед тегом <body> вставьте второй JS-код, который активирует галерею и включает нужные элементы интерфейса.

<script>
$(document).ready(function() {
  $('.fancy-box').each(function() {
    var img = $(this).find('img');
    
    if (img.length) {
      img.attr('data-fancybox', 'gallery1');
      img.attr('data-src', img.attr('src'));
      img.attr('data-thumb', img.attr('src'));
    }
  });

  // Инициализация Fancybox
  $('[data-fancybox="gallery1"]').fancybox({
    buttons: [
      "zoom",
      "slideShow", 
      "fullScreen",
      "download",
      "thumbs",
      "close"
    ]
  });
});
</script>

По умолчанию этот скрипт активирует:

  • zoom — увеличение изображения
  • slideShow — автоматическое листание
  • fullScreen — полноэкранный режим
  • download — скачивание
  • thumbs — миниатюры под галереей
  • close — кнопка закрытия

Вставьте код в блок Перед тегом <body>

Если что-то лишнее — просто уберите строку из списка функций.

Шаг 4: Сохраните и опубликуйте проект

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

Две и более галереи

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

  1. Создайте новый класс — например fancy-box-2 — и назначьте его всем изображениям, которые должны входить во вторую галерею.

  1. Теперь перейдите в код перед тегом <body>.
  • Продублируйте верхнюю часть кода с третьей строчки (строки 2-11) и поменяйте в ней название класса на новый (fancy-box-2) и номер галереи, например img.attr(‘data-fancybox’, ‘gallery1’).
  • Продублируйте блок инициализации галереи (строки 14-23) и замените в нем порядковый номер галереи, например $(‘[data-fancybox=“gallery1”]’) — чтобы Fancybox понимал, что это отдельная группа.

<script>
$(document).ready(function() {
  // Скрипт галереи-1
 $('.fancy-box').each(function() {
    var img = $(this).find('img');
    
    if (img.length) {
      img.attr('data-fancybox', 'gallery1');
      img.attr('data-src', img.attr('src'));
      img.attr('data-thumb', img.attr('src'));
    }
  });
  
    // Скрипт галереи-2
 $('.fancy-box-2').each(function() {
    var img = $(this).find('img');
    
    if (img.length) {
      img.attr('data-fancybox', 'gallery2');
      img.attr('data-src', img.attr('src'));
      img.attr('data-thumb', img.attr('src'));
    }
  });
  
  // Инициализация Fancybox-1
  $('[data-fancybox="gallery1"]').fancybox({
    buttons: [
      "zoom",
      "slideShow", 
      "fullScreen",
      "download",
      "thumbs",
      "close"
    ]
  });
  
  // Инициализация Fancybox-2
  $('[data-fancybox="gallery2"]').fancybox({
    buttons: [
      "zoom",
      "slideShow", 
      "fullScreen",
      "download",
      "thumbs",
      "close"
    ]
  });
});
</script>

  1. Сохраните проект и проверьте работу.

Готово! Первая галерея открывает один набор изображений, вторая — другой. Они полностью независимые, все работает идеально.

Важно: если после вставки кода никакая галерея не работает, то вы где-то пропустили скобку. Рекомендуется начать заново.

Изменение цвета обводки

Если нужно поменять цвет обводки в режиме миниатюр, то надо вставить такой код после </script>:

<style>
  .fancybox-thumbs__list a:before {
    border: 3px solid #000000;
    }
</style>

Tут уменьшена обводка до трех пикселей и сменен цвет на черный (#000000;)

Полный код будет выглядеть вот так:

<script>
$(document).ready(function() {
  $('.fancy-box').each(function() {
    var img = $(this).find('img');
    
    if (img.length) {
      img.attr('data-fancybox', 'gallery1');
      img.attr('data-src', img.attr('src'));
      img.attr('data-thumb', img.attr('src'));
    }
  });

  // Инициализация Fancybox
  $('[data-fancybox="gallery1"]').fancybox({
    buttons: [
      "zoom",
      "slideShow", 
      "fullScreen",
      "download",
      "thumbs",
      "close"
    ]
  });
});
</script>

<style>
  .fancybox-thumbs__list a:before {
    border: 3px solid #000000;
    }
</style>

Резюме

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