Easy FancyBox Docs

Slider Revolution 5 and Easy FancyBox

To make Easy FancyBox work with the Slider Revolution plugin for WordPress version 5 or older, follow these steps.

Important Notes:
1) Since Slider Revolution version 6, everything has changed. The old code does not work anymore but a work-around has been found. Go to the new instructions Slider Revolution version 6 here.
2) The images used in this article are from Slider Revolution version 5 (courtesy Themepunch). The links in this article should help you find the relevant information in the Themepunch Revolution Slider documentation.
3) If you have a basic image carousel, then you probably only need to follow the instructions under 1. and 2. but if you have built a complex slider with different layers and you wish to do more tricky things, then read part 3.

1. Custom Javascript

Base script

Open the slider for editing and go to the Param. Slider page to edit the parameters. Copy this code and paste it in the Custom Javascript field at the bottom of the page:


123api.on('revolution.slide.onloaded', function() {    jQuery(document).trigger('post-load');});

NOTE: This is the base code. The following optional additions to this code are not strictly necessary but may be helpful.


If you wish to make the slider stop completely after a click to open the light box, then add the code jQuery(this).on('click', function() { API.revpause(); }); so it looks like this:


1234api.on('revolution.slide.onloaded', function() {    jQuery(document).trigger('post-load');    jQuery(this).on('click', function() { api.revpause(); });});

If you have an image slider and you wish to show captions as titles in the light box, then using the following code might work for you:


1234567api.on('revolution.slide.onloaded', function() {    jQuery(document).trigger('post-load');    jQuery(this).find('li').each( function() {        var title = jQuery(this).find('div.Photography-Textblock').text();        jQuery(this).find('div.slidelink a').attr('title', title);    });});

Verify the API identifier

API function examples

If the code above does not work out of the box, then the following change may be needed.

Each slider has a unique API identifier. This identifier is always a combination of revapi and the slider ID (a number) which you can also see in the URL when editing the slider.

Go to your Slider Parameters and open the tab on the right side API Functions where you can see examples. Like the first could be revapi3.revstart(); where the identifier is revapi3.

Take the unique identifier from these examples and replace “api” in the code from above with it.

2. Optional settings

For the best user experience, these options are advised:

Set Stop Slide on Hover to “ON”
Set Disable Blur/Focus Behavior option to “ON”

3. Advanced sliders: Connect the slide’s content to the light box

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

3.1 Open the light box when the slide’s main background 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. (In Slider Revolution 6 the URL is hidden but you can click the link icon next to “Type: Image” to copy it)

Next, from the “Link & SEO” tab (in Slider Revolution 6 under “Tags & Link”), paste the image’s url into the “Slide Link” field, along with the other options shown here:

3.2 Open the light box when a Content Layer is clicked

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

In most cases, with autodetection enabled on Settings > Media for the media type, you are now ready. But if you do not have autodetection for the media type enabled or if the link target is another web page (autodetection not possible) and should be opened up in an iframe, then you need to take one last step to set the appropriate class manually:

With the Layer still selected, add the class under the “Attributes” tab. You can find the appropriate class on Settings > Media in each media type section. And make sure to enable the media type there too!

Good luck and please let us know if this was helpful or not below 🙂