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

【问题标题】：How do I make multiple galleries on one page using Fancybox?如何使用 Fancybox 在一个页面上制作多个画廊？
【发布时间】：2018-05-21 00:42:45
【问题描述】：

我正在尝试为我的网站制作 3 个画廊，全部使用 Fancybox 的 class="imglist" 和 data-fancybox="images" data-caption=""。我试过关注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 个图像的大画廊。有什么想法吗？

最后但并非最不重要的一点是，在花哨的盒子中查看图像时，有什么方法可以删除播放/暂停和全屏按钮？我发现它们毫无用处，只是占用了不需要的空间。

感谢您的宝贵时间。

【问题讨论】：

标签： html css fancybox gallery fancybox-3

【解决方案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

【讨论】：

谢谢你，画廊的建议奏效了！这是重要的问题，但至于按钮，它似乎并没有删除其他按钮。我将脚本代码添加到我的标题中。我想保留缩略图、分享、添加缩放并显然保留关闭按钮。
确保选择器（例如我的示例中的$('[data-fancybox^="gallery"]')）返回您的元素。如果没有，则将使用默认值。您可以使用任何选择器，例如 - $('.fancybox') Demo - codepen.io/anon/pen/jagbdJ?editors=1010