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

Posted 2023-05-09

【中文标题】在 fancybox 中，仅显示来自 lightbox 中特定 div 的照片

【英文标题】：In fancybox, show only photos from specific div in lightbox

【发布时间】：2020-05-16 11:10:18

【问题描述】：

我的页面中有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>

【参考方案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>

但是，要应用您的自定义，请确保您的选择器实际返回您的元素。例如，如果你有$('[data-fancybox="images"]').fancybox(..);，它不会选择有data-fancybox="images1"的元素