How do I initiate a fancybox 3 slideshow by clicking on a single image or button

问题

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.

回答1:

If you are looking for a way to start gallery with one preview image, then simply create your links and make only first one visible, see this demo - 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>

回答2:

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>

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".

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)

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

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

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');
    });
});

来源：https://stackoverflow.com/questions/44425384/how-do-i-initiate-a-fancybox-3-slideshow-by-clicking-on-a-single-image-or-button

标签

jquery

fancybox