时间戳

首页 > 解决方案 > 在 fancybox 中，仅显示来自 lightbox 中特定 div 的照片

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

问题描述

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

在此处输入图像描述

我尝试做的是，上面视图中的用户只能看到点击的 div 的照片，而不是全部！因此，如果他单击第一个图像的第一个图像div，那么他应该只看到缩略图中的 2 个图像......

我尝试在每个 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>

标签： jqueryfancyboxfancybox-3

解决方案

对属性使用相同的值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"

推荐阅读