Как создать отдельные галереи Fancybox на одной странице?

Мы используем jQuery 1.7.1 и Fancybox 1.3.4. Я совершенно новый для Fancybox. Я никогда не использовал его до вчерашнего дня, но он широко используется на сайте, над которым я работаю. Человек, который создал Fancybox, был прекращен, потому что он был... неактуальным.:)

Я создаю страницу сравнения продуктов. На одной странице будет отображаться до четырех продуктов. Каждый продукт может иметь до пяти изображений, специфичных для этого продукта.

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

Я хочу, чтобы у каждого продукта была своя галерея. Если они нажимают на Продукт A, они будут видеть только изображения, связанные с Продуктом A. Если они нажимают на Продукт B... вы получаете его.

Как я могу сделать Fancybox создавать отдельные галереи на одной странице?

ИЗМЕНИТЬ

В настоящее время мой атрибут rel установлен в "autoGallery". Один из приведенных ниже ответов предложил мне изменить его на что-то вроде этого, что создаст то, что я ищу:

<img rel='Gallery1'>
<img rel='Gallery1'>
<img rel='Gallery2'>
<img rel='Gallery2'>
<img rel='Gallery3'>
<img rel='Gallery3'>

Если я изменю атрибут rel на что угодно, кроме "autoGallery", щелчок по изображению просто откроет изображение в новом окне.

Ответ 1

Просто назначьте другой атрибут rel для каждой галереи

<a class="fancybox" rel="gallery01" href="product01/image01.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image02.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image03.jpg">one</a>
<a class="fancybox" rel="gallery01" href="product01/image04.jpg">one</a>

<a class="fancybox" rel="gallery02" href="product02/image01.jpg">two</a>
<a class="fancybox" rel="gallery02" href="product02/image02.jpg">two</a>
<a class="fancybox" rel="gallery02" href="product02/image03.jpg">two</a>

<a class="fancybox" rel="gallery03" href="product03/image01.jpg">three</a>
<a class="fancybox" rel="gallery03" href="product03/image02.jpg">three</a>
<a class="fancybox" rel="gallery03" href="product03/image03.jpg">three</a>

... и все они могут использовать один и тот же script:

$(".fancybox").fancybox();

Ответ 2

У меня были те же проблемы с Fancybox 3 - использование rel="gallery" и data-fancybox-group="gallery" не работало.

Нашел этот код/​​скрипку, заставив его работать, добавив .attr('data-fancybox', 'gallery');

https://codepen.io/anon/pen/EwpOxE?editors=1010