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