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

Question

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

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

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

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

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

EDIT

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

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

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

Answer 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>

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

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

Answer 2

Вот еще один пример (на основе fancyBox3 ). Добавление того же значения для атрибута data-fancybox. (например, data-fancybox="group")

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
body {
  margin: 0;
  padding: 10vh 10vw;
  color: #444;
}

h1 {
  font-weight: 700px;
}

h2 {
  font-weight: 600;
}

a,
a:hover {
  color: #ff5268;
}

.imglist {
  font-size: 0;
}

.imglist a {
  display: inline-block;
  margin: 10px 10px 0 0;
}

.imglist a:last-of-type {
  margin-right: 0;
}

.imglist a img {
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js"></script>

<h2>fancybox v3.5.2 - Grouping galleries</h2>

<p>
  Groups are created by adding the same <code>data-fancybox</code> attribute value
</p>

<hr class="my-5" />

<h4>Group 1 Gallery</h4>
<p class="imglist" style="max-width: 1000px;">
  <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="group1" data-caption="Backpackers following a dirt trail">
    <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
  </a>

  <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="group1" data-caption="Mallorca, Llubí, Spain">
    <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
  </a>

  <a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="group1" data-caption="Danish summer">
    <img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" />
  </a>

  <a href="https://source.unsplash.com/eXHeq48Z-Q4/1500x1000" data-fancybox="group1" data-caption="Sunrise above a sandy beach">
    <img src="https://source.unsplash.com/eXHeq48Z-Q4/240x160" />
  </a>
</p>

<h4>Group 2 Gallery</h4>
<p class="imglist" style="max-width: 1000px;">
  <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="group2" data-caption="Woman on a slope by the shore">
    <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
  </a>

  <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="group2" data-caption="Mountain hiking sunset">
    <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
  </a>

  <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="group2" data-caption="Sunset Picnic">
    <img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
  </a>

  <a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="group2" data-caption="On them Indiana Nights">
    <img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
  </a>
</p>

Answer 3

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

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

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

Answer 4

Fancybox 3 использует атрибут data-fancybox для группировки галерей.Видимо rel больше не распознается.Поэтому просто используйте один и тот же идентификатор для всех элементов, которые вы хотите сгруппировать в галерее.