如何通过单击单个图像或按钮启动fancybox 3幻灯片显示。 Fancyapps网站上有一个很好的示例,其中包含自定义演示,但没有特定于此案例的编码示例。
答案 0 :(得分:0)
这是如何通过单击图像打开fancyBox库的示例:
<a href="image_1.jpg" data-fancybox="my_gallery" data-caption="Caption #1">
<img src="thumbnail_1.jpg" alt="" />
</a>
<a href="image_2.jpg" data-fancybox="my_gallery" data-caption="Caption #2">
<img src="thumbnail_2.jpg" alt="" />
</a>
您只需要将图像封装在ancors中并为这些锚点提供相同的data-fancybox属性值,在上面的示例中它是&#34; my_gallery&#34;。
这样你们每个人的图像都会变得可点击,并会打开一个包含同一个图库中所有图像的fancyBox图库(data-fancybox属性值)
要通过单击按钮打开fancyBox,您需要添加按钮
<button class="open-gallery">Open gallery</button>
在您的JS代码中,将单击事件处理程序添加到将打开您的图库的该按钮
$(document).ready(function() {
$('button.open-gallery').click(function() {
$('a[data-fancybox="my_gallery"]').first().trigger('click');
});
});
答案 1 :(得分:0)
如果您正在寻找使用一个预览图片启动图库的方法,那么只需创建链接并仅显示第一个链接,请参阅此演示 - https://codepen.io/fancyapps/pen/WjVXyx?editors=1000
<p>
<a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-single">
<img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
</a>
</p>
<div style="display: none;">
<a href="https://farm3.staticflickr.com/2947/33594572585_b48eba935b_k_d.jpg" data-fancybox="images-single"
data-thumb="https://farm3.staticflickr.com/2947/33594572585_46ca00f3a5_m_d.jpg"></a>
<a href="https://farm3.staticflickr.com/2859/33395734202_522f9d8efd_k_d.jpg" data-fancybox="images-single"
data-thumb="https://farm3.staticflickr.com/2859/33395734202_15a81c4ef3_m_d.jpg"></a>
</div>