Fancybox

Lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Include the library in your page

    • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

      <!-- Fancybox (handles image and video lightbox and galleries) -->
<script type="text/javascript" src="assets/js/jquery.fancybox.min.js"></script>

      Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

      <!-- Fancybox (handles image and video lightbox and galleries) -->
<script type="text/javascript" src="https://unpkg.com/@fancyapps/fancybox@3.5.2"></script>
  2. Load the required CSS in components.scss
    • Declare the following import statement in scss/custom/components.scss:
    @import "components/optional/fancybox";

Basic Usage

The most basic way to use fancybox is by adding the data-fancybox attribute to your element.

This will automatically bind a click event handler that will start fancybox. Use href or data-src attribute to specify source of your content.

<a href="image.jpg" data-fancybox data-caption="Caption for single image">
  <img src="thumbnail.jpg" alt="Thumbnail Image" />
</a>

Consult the Fancybox Documentation for more detail.

Options

Options can be passed into each instance as JSON data in the data-options attribute.

The example below sets loop to true which enables endless looping of gallery images.

Note the use of single quotes around the JSON object.

<a href="image_1.jpg" data-fancybox="gallery1" data-options='{"loop":true}' data-caption="Caption #1" >
  <img src="thumbnail_1.jpg" alt="Image 1" />
</a>

Consult the Fancybox Documentation for a full list of available options.

NOTE: It is necessary to add the same options JSON to each item in the gallery to enable looping.

Galleries

Group images together in a gallery by giving each image the same string in the data-fancybox attribute.

This example creates two galleries gallery1 and gallery2 with two images in each.

<a href="image_1.jpg" data-fancybox="gallery1" data-caption="Caption #1">
  <img src="thumbnail_1.jpg" alt="Image 1" />
</a>

<a href="image_2.jpg" data-fancybox="gallery1" data-caption="Caption #2">
  <img src="thumbnail_2.jpg" alt="Image 2" />
</a>

<a href="image_3.jpg" data-fancybox="gallery2" data-caption="Caption #3">
  <img src="thumbnail_3.jpg" alt="Image 3" />
</a>

<a href="image_4.jpg" data-fancybox="gallery2" data-caption="Caption #4">
  <img src="thumbnail_4.jpg" alt="Image 4" />
</a>

Consult the Fancybox Documentation for more detail.

Video

YouTube and Vimeo videos can be used with fancybox by providing the Youtube or Vimeo URL. Link to an MP4 video directly or use trigger element to display a hidden <video> element.

Use data-width and data-height attributes to customize video dimensions and data-ratio for the aspect ratio.

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
    YouTube video
</a>

<a data-fancybox href="https://vimeo.com/191947042">
    Vimeo video
</a>

<a data-fancybox data-width="640" data-height="360" href="video.mp4">
    Direct link to MP4 video
</a>

<a data-fancybox href="#myVideo">
    HTML5 video element
</a>

<video width="640" height="320" controls id="myVideo" style="display:none;">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
    Your browser doesn't support HTML5 video tag.
</video>

Consult the Fancybox Documentation for more detail.