在 fancybox 中，仅在灯箱中显示来自特定 div 的照片

Question

我的页面有2个点，其中有一些图片使用了fancybox。当用户单击照片时，用户会看到 lightbox 中的图像，而其他图像在右侧显示为缩略图。

我试图做的是，上面视图中的用户只能看到单击的 div 的照片，而不是全部！因此，如果他点击第一张 div 的第一张图片，那么他应该只会在拇指视图中看到两张图片...

我尝试在每个 div 的锚点中使用 data-fancybox="images1" 和 data-fancybox="images2"，但没有成功..

$('[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>

Answer 1

对 data-fancybox 属性使用相同的值（例如，data-fancybox="images1"）会告诉脚本将它们分组，演示：

$('[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>

但是，要应用您的自定义，请确保您的 select 或实际上 returns 您的元素。例如，如果您有 $('[data-fancybox="images"]').fancybox({..});，则 select 个元素不会有 data-fancybox="images1"

在 fancybox 中，仅在灯箱中显示来自特定 div 的照片

In fancybox, show only photos from specific div in lightbox

jquery

fancybox

fancybox-3