如何使用FancyBox在一个页面上制作多个图库？

问题描述

我正在尝试为我的网站制作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个图像的大图库。有什么想法吗？

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

感谢您抽出时间。

推荐答案

库是通过添加相同的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在一个页面上制作多个图库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！