Sections

Free

Premium

Lightboxes

Present images, content and videos within lightboxes.

In this article

All of our themes fully support the fancybox plugin, a responsive, touch-enabled lightbox plugin that supports various types of media. To start using image, gallery or video lightboxes in your Help Center, enable lightboxes within the Article page elements setting section in your theme’s settings.

Examples

Single images

Present images using fancybox using a thumbnail image that links to a larger image:

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

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 (Code icon) editor.

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.

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