Question

如何通过单击单个图像或按钮启动fancybox 3幻灯片显示。 Fancyapps网站上有一个很好的示例，其中包含自定义演示，但没有特定于此案例的编码示例。

Answer 1

这是如何通过单击图像打开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');
    });
});

Answer 2

如果您正在寻找使用一个预览图片启动图库的方法，那么只需创建链接并仅显示第一个链接，请参阅此演示 - 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>

如何通过单击单个图像或按钮来启动fancybox 3幻灯片放映

2 个答案: