How to create separate Fancybox galleries on the same page?
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
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>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();