Внедряем Fancybox на Taptop

Довольно частая задача, когда нужно сделать Lightbox для фотографий. Наример в галереи или карточке товара. Разберем, как за пару минут добавить встроенную библиотеку к себе в проект.

In the pursuit of minimalism, the discerning artist becomes an editor, carefully selecting and discarding elements until only the essential remains. This process requires a keen eye for detail and an understanding that every component contributes to the overall impact of the piece.

1. Добавляем элементу image класс fancy-box

2. Подключаем стили для Fancybox

<!-- 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>

3. Добавляем скрипт в body:

<script>
  $(document).ready(function() {
  // Перебираем все элементы с классом fancy-box
  $('.fancy-box').each(function() {
    // Ищем внутри текущего элемента тег img
    const img = $(this).find('img');
    
    if (img.length) {
      // Обернём img в ссылку <a>, если её нет (требуется для Fancybox)
      if (!img.parent('a').length) {
        img.wrap('<a href="' + img.attr('src') + '" data-fancybox="gallery"></a>');
      }
    }
  });

  // Инициализируем Fancybox для всех ссылок, созданных выше
  $('[data-fancybox]').fancybox({
    buttons: [
      "zoom",
      "share",
      "slideShow",
      "fullScreen",
      "download",
      "thumbs",
      "close"
    ]
  });
});
</script>

Галлерея подключена

Коротко о том, какие элементы галереи подключены в этом скрипте:

• zoom - увеличение изображения
• share - возможность поделиться изображением
• slideShow - запуск слайд-шоу
• fullScrean - просмотр в полноэкранном режиме
• download - скачивание изображения
• thumbs - включение миниатюр
• close - кнопка закрытия

Более подробно по дополнительным функциям можно посмотреть здесь