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

问题描述

如何通过单击单个图像或按钮来启动fancybox 3幻灯片放映.在Fancyapps网站上似乎有一个很好的例子，带有Custom Demo，但没有特定于此情况的编码例子.

How do I initiate a fancybox 3 slideshow by clicking on a single image or button. There appears to be a good example on the Fancyapps site with the Custom Demo but no coding example specific to this case.

推荐答案

这是如何通过单击图像来打开fancyBox画廊的示例:

This is an example of how to open a fancyBox gallery by clicking on an image:

<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属性值，在上面的示例中为"my_gallery".

You just need to encapsulate your images in ancors and give these anchors the same data-fancybox attribute value, in the example above it is "my_gallery".

这样，您的每张图片都将变为可点击状态，并会打开一个fancyBox画廊，其中包含来自同一画廊的所有图像(data-fancybox属性值)

This way each one of you images will become clickable and will open a fancyBox gallery containing all images from the same gallery (data-fancybox attribute value)

并且为了通过单击按钮打开fancyBox，您需要添加按钮

And in order to open the fancyBox by clicking a button, you need to add the button

<button class="open-gallery">Open gallery</button>

然后在您的JS代码中，向该按钮添加一个点击事件处理程序，以打开您的图片库

And in your JS code, add a click event handler to that button that will open your gallery

$(document).ready(function() {
    $('button.open-gallery').click(function() {
        $('a[data-fancybox="my_gallery"]').first().trigger('click');
    });
});

这篇关于如何通过单击单个图像或按钮来启动fancybox 3幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！