How to create separate Fancybox galleries on the same page?

Question

We are using jQuery 1.7.1 and Fancybox 1.3.4. I am brand new to Fancybox. I have never used it before yesterday, but it is used widely on a site that I am working on. The person who set up Fancybox was terminated because he was ... irrelevant. :)

I am creating a product comparison page. Up to four products will display on a single page. Each product may have up to five images specific to that product.

Currently, when I click on any image, Fancybox pops open and creates a gallery of all of the images on the page. So, if I have one product with five images, there is a five image gallery. If I have four products with five images, there is one gallery with twenty images. This doesn't work well for me.

What I want is for each product to have its own gallery. If a they click on Product A, they will see only the images associated with Product A. If they click on Product B... you get it.

How can I make Fancybox create separate galleries on a single page?

EDIT

Currently, my rel attribute is set to 'autoGallery'. One of the answers below suggested that I change it to something like this, which would produce what I am looking for:

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

If I change the rel attribute to anything except for 'autoGallery', clicking on the image just opens the image into a new window.

Answer 1

Just assign a different rel attribute to each gallery

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

... and they all can use the same script:

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

Answer 2

Here is one more example (based on fancyBox3). Adding same value for data-fancybox attribute. (for example, 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

I had the same problems with Fancybox 3 - using rel="gallery" and data-fancybox-group="gallery" didnt work.

Found this codepen / fiddle that made it work, by adding .attr('data-fancybox', 'gallery');

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

Answer 4

Fancybox 3 uses the data-fancybox attribute to group galleries. Apparently rel is not recognized anymore. So simply use the same identifier for all elements you want to group in a gallery.

Answer 5

I have tried using rel and it is not working for me,

But I get rel value to the variable and check it when the slider is enabled.

<a href="" rel="gallery01" data-fancybox="slide"></a>
$('[data-fancybox="slide"]').each(function(){
    var relValue = $(this).attr('rel');
      $('[data-fancybox="slide"][rel="'+relValue+'"]').fancybox({
//options
  });
});