Using the FancyBox Lightbox with Slider Revolution

Load images, iframes, Ajax content, YouTube video and Vimeo video with Fancybox and Slider Revolution.

Edit the “revapi1” part with whatever API name is being used for your slider.  To find this, view your slider’s API section.

The rest of the script does not need to be edited, but you can edit the FancyBox options if you want.  Click here for a full list of available options.

This is needed to make sure the slider pauses when the lightbox is opened.

4. Connect your slide's content to the lightbox

There are two parts of a slide that can be connected to the lightbox.  The first is to open the lightbox when the slide’s main background is clicked.  And the second is to open the lightbox when a Content Layer is clicked.

From your slide’s main background settings section, add an image as the main background, then click the “Source Settings” tab, and then copy the “Source Info” url.

Next, from the “Link & SEO” tab, copy the image’s url into the “Slide Link” field, along with the other options shown here:

Add a Content Layer to your slide (can be anything), and then add a Click Action. Then enter the url of the image you wish to open inside the lightbox into the “Link Url” field, and also use the additional settings shown here:

Next, with the Layer still selected, add the “fancybox” class from the “Attributes” tab.

  • Quick Tip: Only want single items to open in the lightbox?
    Use the following modification:

Change this line:

to this:

Variation #1 - Load Ajax Content

Link to the page you wish to load your content from, and then adjust the “ajaxContentContainer” value in the script below.

Variation #2 - Load an iFrame

Variation #3 - Load a YouTube video

Use the following url format as the link, adjusting the video’s ID

Variation #4 - Load a Vimeo video

Use the following url format as the link, adjusting the video’s ID