Как создать отдельные галереи 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