In this article
Our themes fully support the fancybox plugin, a responsive, touch-enabled lightbox plugin that supports various types of media.
Installation
The fancybox plugin requires jQuery, which isn’t included in our themes by default. Add references to the latest jQuery and fancybox files in your document_head.hbs
template:
<!-- jQuery 3.5.1 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<!-- fancybox 3.5.7 -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
Usage
Lightbox functionality can be used in your page templates or in article and post content by editing the underlying code in the Source Code () editor.
Using data attributes
The most basic way to use fancybox is to add the data-fancybox
attribute to your element and specify the source of your content with the href
or data-src
attributes:
<a href="image.jpg" data-fancybox data-caption="Caption for single image">
<img src="thumbnail.jpg" alt="" />
</a>
If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.
Using JavaScript
Use jQuery to select your element(s) and call the fancybox
method:
$('[data-fancybox="gallery"]').fancybox({
// Options will go here
});
If you need to bind fancybox to dynamically added elements, use the selector option to attach a click event listener for elements that exist now or in the future.
$().fancybox({
selector : '.imglist a:visible'
});
Examples
Single images
Present images using fancybox using a thumbnail image that links to a larger image:
<a href="image.jpg" data-fancybox data-caption="An image within a lightbox">
<img src="thumbnail.jpg" alt="" />
</a>
Image galleries
You can group images into a gallery by giving them the same unique data-fancybox
value:
<a href="image-1.jpg" data-fancybox="gallery" data-caption="Caption for the first image">
<img src="thumbnail-1.jpg" alt="" />
</a>
<a href="image-2.jpg" data-fancybox="gallery" data-caption="Caption for the second image">
<img src="thumbnail-2.jpg" alt="" />
</a>
Videos
YouTube, Vimeo and HTML5 videos can be used with fancybox by providing the URL.
To learn about additional media types, access descriptions of more advanced use cases and view the complete set of available options, refer to the fancybox documentation.