Lightboxes

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.

<a data-fancybox href="https://www.youtube.com/watch?v=O7MGG4cTKv4">
  <img src="thumbnail.jpg">
</a>

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.