Our themes allow you to enable lightboxes throughout your help center using theme settings. Once enabled you decide what content you’d like to display within a lightbox and how it should behave.
Single images
A simple use-case is to have images presented within a lightbox when a visitor clicks on them. We recommend where possible using a small version of your image within the article content and displaying the full-size version inside the lightbox.
<a href="image.jpg" data-fancybox data-caption="An image within a lightbox">
<img src="thumbnail.jpg" alt="An image within a lightbox" />
</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 class="hidden" 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 displayed within a lightbox by providing the URL. The example below uses an image as a video thumbnail.
<a data-fancybox href="https://www.youtube.com/watch?v=O7MGG4cTKv4">
<img src="thumbnail.jpg" alt="" />
</a>Creating lightboxes
The JavaScript and CSS necessary to create lightboxes can be added to your theme using theme settings. If you enable the Lightboxes setting under Article page elements, everything you need to start creating lightboxes will be added automatically.
The most basic way to create a lightbox 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="true" data-caption="Caption for single image">
<img src="thumbnail.jpg" alt="" />
</a>
If you have a group of items, you can use the same attribute data-fancybox value for each of them to create a gallery. Each group should have a unique value, for example:
<a href="image-1.jpg" data-fancybox="gallery" data-caption="The first image caption">
<img src="thumbnail-1.jpg" alt="" />
</a>
<a href="image-2.jpg" data-fancybox="gallery" data-caption="The second image caption">
<img src="thumbnail-2.jpg" alt="" />
</a>
If data attributes are used you will need to ensure that the allow unsafe HTML setting is enabled within Zendesk Guide.
Use jQuery, which is automatically included when lightboxes are enabled, 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'
});
By default, when the Lightboxes theme setting is enabled all images within your article content will be automatically converted to open within lightboxes. To disable this functionality, remove the following line from your theme’s footer.hbs template:
{{~#if settings.enable_lightboxes}}<script type="text/javascript" src="{{asset 'extension-lightboxes.min.js'}}" defer></script>{{/if~}}
Options
To learn about additional media types, access descriptions of more advanced use cases and view the complete set of available options available for lightboxes, refer to the fancybox documentation.
