# Fancybox

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

###

About the Plugin

Website GitHub npm

###

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.