Как сделать Fancybox thumbnails в виде галереи, а не слайдера?

Для создания галереи с использованием Fancybox именно в виде миниатюр (thumbnails), а не слайдера, вы можете использовать следующий подход.

1. Подключите необходимые файлы Fancybox. Включите файлы стилей CSS и файлы скрипта JavaScript в ваш HTML-документ. Убедитесь, что пути к файлам указаны правильно.

<link rel="stylesheet" href="path/to/fancybox.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/fancybox.min.js"></script>

2. Создайте HTML-разметку для галереи. Создайте основной контейнер для галереи и вложите в него элементы с миниатюрами изображений. Используйте атрибут data-fancybox для указания соответствующих групп изображений.

<div id="gallery" class="fancybox-gallery">
  <a href="path/to/image1.jpg" data-fancybox="gallery">
    <img src="path/to/thumbnail1.jpg" alt="Image 1">
  </a>
  <a href="path/to/image2.jpg" data-fancybox="gallery">
    <img src="path/to/thumbnail2.jpg" alt="Image 2">
  </a>
  <!-- и т.д. -->
</div>

Обратите внимание, что в приведенном примере каждая миниатюра изображения обернута в ссылку <a>. Значение атрибута href - это путь к полноразмерной версии изображения, а атрибут data-fancybox устанавливает группу, к которой относится данное изображение. Можно добавить сколько угодно изображений и произвольное количество групп.

3. Инициализируйте Fancybox. Напишите JavaScript-код, который инициализирует Fancybox с использованием параметра thumbs для отображения миниатюр в виде галереи.

$(document).ready(function() {
  $().fancybox({
    selector: '[data-fancybox="gallery"]',
    loop: true
  });
});

Этот код инициализирует Fancybox для элементов с атрибутом data-fancybox равным "gallery". Опция loop: true позволяет прокручивать галерею бесконечно.

4. Добавьте стили для миниатюр. Настройте вашу галерею, добавив соответствующие стили для миниатюр. Например, вы можете использовать CSS для задания размеров, отступов, фонового цвета, переходов и т.д.

.fancybox-gallery a {
  display: inline-block;
  width: 150px;
  height: 100px;
  margin: 10px;
  background-color: #f0f0f0;
  transition: opacity 0.3s;
}

.fancybox-gallery a:hover {
  opacity: 0.7;
}

.fancybox-gallery img {
  max-width: 100%;
  max-height: 100%;
}

5. Проверьте вашу галерею. Откройте страницу с вашей галереей в браузере и убедитесь, что миниатюры отображаются в виде галереи, и при клике на них открывается полноразмерное изображение в Fancybox.

Это всего лишь пример реализации галереи с помощью Fancybox с использованием миниатюр в виде галереи. Вы можете настроить и дополнить его в соответствии с вашими требованиями и предпочтениями, добавив, например, анимацию переходов или дополнительные параметры конфигурации Fancybox.

Надеюсь, этот ответ помог вам, и вы успешно создали галерею с использованием Fancybox и миниатюр в виде галереи.