Как в fancybox 4 (или 5) выполнить группировку галереи с миниатюрами?

В Fancybox 4 и 5 можно выполнить группировку галереи с миниатюрами, используя атрибут `data-fancybox` вместе с одинаковым значением для всех миниатюр, которые должны быть сгруппированы. Например:

HTML:

```html
<div class="item-gallery">
  <a href="image1.jpg" data-fancybox="group1">
    <img src="thumbnail1.jpg" alt="Thumbnail 1">
  </a>
  <a href="image2.jpg" data-fancybox="group1">
    <img src="thumbnail2.jpg" alt="Thumbnail 2">
  </a>
</div>

<div class="item-gallery">
  <a href="image3.jpg" data-fancybox="group2">
    <img src="thumbnail3.jpg" alt="Thumbnail 3">
  </a>
  <a href="image4.jpg" data-fancybox="group2">
    <img src="thumbnail4.jpg" alt="Thumbnail 4">
  </a>
</div>
```

JavaScript:

```javascript
$('[data-fancybox]').fancybox();
```

В приведенном примере используется атрибут `data-fancybox` со значением "group1" для первой галереи и значением "group2" для второй галереи. Это связывает соответствующие миниатюры в группы, и Fancybox будет отображать их как галерею при взаимодействии с одной из миниатюр.

Чтобы ограничить подтягивание миниатюр только внутри класса "item-gallery" при открытии изображения, можно использовать делегирование событий. Например:

```javascript
$('.item-gallery').on('click', 'a[data-fancybox]', function(event) {
  event.preventDefault();
  var gallerySelector = $(this).closest('.item-gallery').find('a[data-fancybox]');
  $.fancybox.open(gallerySelector, {
    // Опции Fancybox
  });
});
```

Этот код прослушивает клики на элементах `<a>` с атрибутом `data-fancybox` внутри элементов с классом "item-gallery". При клике на такой элемент, он открывает галерею Fancybox, используя только миниатюры внутри текущей "item-gallery".

Надеюсь, это поможет вам реализовать требуемую функциональность.

document.querySelectorAll('.item-gallery').forEach(element => {
  Fancybox.bind(element, '[data-fancybox="single"]', {});
});