I have coded a system which uses the Slick Slider plugin so that I can slide horizontally from one content to another (those slides are including both pictures and text). I also added Fancybox so that I can see the pictures in those slides in fullscreen If needed.
But those two plugins kind of conflict with each other.
Everything works but if I have more than one slide, the Fancybox gallery will show me several times the same picture (it behaves like a gallery of the same picture).
It's clearly a conflict as when I get rid of the slider js file, the Fancybox works again as it should (each picture is only showed once).
And when I keep both the galleries, the strangest thing is that the gallery behavior only occurs when I add sliders, even though they don't embed anything at all, no Fancybox, no pictures, no nothing.
Here below a jsfiddle link. My code is way more complicated of course but I made it as simple as it is possible to be for the test case. Almost no styling or js besides the plugins.
You'll see that if you get rid of everything inside the ".slider2" div, it will behave just fine. If not, the first picture will display a gallery of 2 identical pictures (instead of one and it will say by default that it is showing the picture 1 of 2) while the second image will display a gallery of 3 identical images (instead of one and it will say by default that it is showing the picture 2 of 3).
Thank you for your help.
<head>
<link rel="stylesheet" type="text/css" href="styles/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<style>
img{width:50%;}
</style>
</head>
<body>
<div class="container">
<div class="slider_block">
<div class="slider1">
<a data-fancybox="test1" href="https://www.lexgotham.com/test/images/im1.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
</a>
</div>
<div class="slider2">
<a data-fancybox="test2" href="https://www.lexgotham.com/test/images/im2.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>$(document).ready(function() {$('.sliding').slick({});});</script>
</body>
Slick clones the slides in order to "rotate" the carousel. Which means you have more than 1 picture with the same value of data-fancybox. Which is passed on as rel value to each link with a data-fancybox value.
To disable the gallery feature, you have to not pass a rel value, so just specify the data-fancybox without a value:
<a data-fancybox href="https://www.lexgotham.com/test/images/im2.jpg">
See it working:
$(window).on('load', () => {
$('.slider_block').slick();
});img {
width: 50%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<html>
<div class="container">
<div class="slider_block">
<div class="slider1">
<a data-fancybox href="https://www.lexgotham.com/test/images/im1.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
</a>
</div>
<div class="slider2">
<a data-fancybox href="https://www.lexgotham.com/test/images/im2.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
</a>
</div>
</div>
</div>If you need the rels (gallery feature) to create custom groups of your slides, you'll have to prevent slick from cloning the slides, by disabling its infinite rotation:
$('.slider_block').slick({
infinite: false;
});
$(window).on('load', () => {
$('.slider_block').slick({infinite:false});
});img {
width: 50%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<html>
<div class="container">
<div class="slider_block">
<div>
<a data-fancybox="gallery-1" href="https://www.lexgotham.com/test/images/im1.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
</a>
</div>
<div>
<a data-fancybox="gallery-1" href="https://www.lexgotham.com/test/images/im2.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
</a>
</div>
<div>
<a data-fancybox="gallery-2" href="https://www.lexgotham.com/test/images/im1.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
</a>
</div>
<div>
<a data-fancybox="gallery-2" href="https://www.lexgotham.com/test/images/im2.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
</a>
</div>
</div>
</div>P.S: [SO] doesn't let you add links to jsfiddle because the fiddle has to be in the post, not on JSfiddle. If you update your fiddle (because, maybe, you want to test the answer?) it will no longer be relevant to future users. Which means you ask for help but don't want to help others.
In short, you can link a fiddle, but it has to compliment the code in the question, not replace it.