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

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

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

В настоящее время, когда я нажимаю на любое изображение, 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", нажатие на изображение просто откроет изображение в новом окне.

2 ответов


просто назначьте другой 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>

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

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

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

нашел этот codepen / fiddle, который заставил его работать, добавив .attr('data-fancybox', 'gallery');

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