In fancybox, show only photos from specific div in lightbox

I have 2 points in my page, where there are some pictures using fancybox. When the user clicks in a photo, then the user sees the image in lightbox, while the other images are show as thumb in right side.

What I try to do, is that the user in the above view could only see only the photos of the div that clicked and not all of them! So if he clicks, the 1st image of the first div, then he should see only the 2 images in the thumbview...

I tried to user data-fancybox="images1" and data-fancybox="images2" in the anchors of each div, but it didn't worked..

$('[data-fancybox="images"]').fancybox({
  buttons: [
    'slideShow',
    'zoom',
    'fullScreen',
    'download',
    'thumbs',
    'close'
  ],
  thumbs: {
    autoStart: true
  }
});

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


<div class="row mb-5">
<a href="https://source.unsplash.com/IvfoDk30JnI/1500x1000" data-fancybox="images" data-caption="caprtion..">
  <img src="https://source.unsplash.com/IvfoDk30JnI/240x160" />
</a>

<a href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" data-fancybox="images" data-caption="caprtion..">
  <img src="https://source.unsplash.com/0JYgd2QuMfw/240x160" />
</a>
</div>


<div class="row">
<a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="images" data-caption="caprtion..">
  <img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
</a>
</div>

Solution

Using same values for data-fancybox attribute (for example, data-fancybox="images1") would tell the script to group them, demo:

$('[data-fancybox]').fancybox({
  buttons: [
    'slideShow',
    'zoom',
    'fullScreen',
    'download',
    'thumbs',
    'close'
  ],
  thumbs: {
    autoStart: true
  }
});

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


<div class="row mb-5">
<a href="https://source.unsplash.com/IvfoDk30JnI/1500x1000" data-fancybox="images1" data-caption="caprtion..">
  <img src="https://source.unsplash.com/IvfoDk30JnI/240x160" />
</a>

<a href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" data-fancybox="images1" data-caption="caprtion..">
  <img src="https://source.unsplash.com/0JYgd2QuMfw/240x160" />
</a>
</div>


<div class="row">
<a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="images2" data-caption="caprtion..">
  <img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
</a>
</div>

But, to apply your customization, make sure that your selector actually returns your elements. For example, if you have $('[data-fancybox="images"]').fancybox({..});, it would not select elements having data-fancybox="images1"