我正在尝试使用Fancybox的class="imglist"
使用data-fancybox="images" data-caption=""
为我的网站制作3个画廊。我已经尝试关注如何在同一页面上创建单独的Fancybox画廊?寻求帮助,但似乎不起作用。我正在使用 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