如何使用 Fancybox 在一页上制作多个画廊？

Question

我正在尝试使用 Fancybox 的 class="imglist" 和 data-fancybox="images" data-caption="" 为我的网站制作 3 个画廊。我试过关注 How to create separate Fancybox galleries on the same page? 寻求帮助，但它似乎不起作用。我正在使用 FancyBox v3.2.10.

我的代码示例：

<h3 class="dropdown clear">Print Design</h3>
<div id="print" class="imglist">
    <a href="images/work/img1.jpg" class="fancybox" rel="gallery01" data-fancybox="images" data-caption="">
        <div class="thumb thumb1"></div></a>
    <a href="images/work/img2.jpg" class="fancybox" rel="gallery01" data-fancybox="">
        <div class="thumb thumb2"></div></a>
    <a href="images/work/img3.jpg" class="fancybox" rel="gallery01" data-fancybox="images" data-caption="">
        <div class="thumb thumb3"></div></a>
    <a href="images/work/img4.jpg" class="fancybox" rel="gallery01" data-fancybox="images" data-caption="">
        <div class="thumb thumb4"></div></a>
</div>
<h3 class="dropdown clear">Photography</h3>
<div id="photo" class="imglist">
    <a href="images/work/photo1.jpg" class="fancybox" rel="gallery02" data-fancybox="images" data-caption="">
        <div class="photothumb photothumb1"></div></a>
    <a href="images/work/photo2.jpg" class="fancybox" rel="gallery02" data-fancybox="images" data-caption="">
        <div class="photothumb photothumb2"></div></a>
    <a href="images/work/photo3.jpg" class="fancybox" rel="gallery02" data-fancybox="images" data-caption="">
        <div class="photothumb photothumb3"></div></a>
    <a href="images/work/photo4.jpg" class="fancybox" rel="gallery02" data-fancybox="images" data-caption="">
        <div class="photothumb photothumb4"></div></a>
</div>

如您所见，我尝试使用 rel="gallery01" 方法，但当我想要两个不同的 4 张图像画廊时，它们只是全部堆叠到一个包含 8 张图像的大画廊中。有什么想法吗？

最后但并非最不重要的一点是，在 fancy box 中查看图像时，有什么方法可以删除 play/pause 和全屏按钮吗？我发现它们非常无用，只是占用了不需要的 space。

感谢您的宝贵时间。

Answer 1

图库是通过添加相同的 data-fancybox 属性值创建的，因此将 rel="gallery01" 替换为 data-fancybox="gallery01"（其余链接也类似）。

您可以使用 buttons 选项自定义工具栏中的按钮，例如：

// Options for all groups
$('[data-fancybox^="gallery"]').fancybox({
  thumbs : {
    autoStart : true
  },
  buttons : [
    'zoom',
    'close'
  ]
});

演示 - https://codepen.io/anon/pen/XzwOyw?editors=1010

此外，请在此处查看文档和示例 - http://fancyapps.com/fancybox/3/docs/#usage

如何使用 Fancybox 在一页上制作多个画廊？

How do I make multiple galleries on one page using Fancybox?

html

css

gallery

fancybox

fancybox-3