Slider Revolution and Easy FancyBox

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

Important Notes:
1) These steps are specifically for Easy FancyBox and an adaptation of the more general ones provided on https://www.themepunch.com/faq/using-fancybox-with-slider-revolution/.
2) Since Slider Revolution version 6, everything has changed. The old code does not work anymore but a work-around has been found. Read the instructions carefully.

3) The images used in this article are from Slider Revolution version 5 (courtesy Themepunch). Version 6 looks different but similar options should be there.

1. Add the following script to your slider’s Custom JavaScript section

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

Copy/paste these two lines to start:

/* change revapi1 to whatever API name is being used for your slider */
var api = revapi1;

Then, in Slider Revolution version 5 and older, copy/paste these lines:

api.on('revolution.slide.onloaded', function() {
    jQuery(document).trigger('post-load');
    /* optional: completely stops the slider when clicked */
    //jQuery(this).on('click', function() { api.revpause(); });
    /* optional: show the caption as title in FancyBox */
    jQuery(this).find('li').each( function() {
        var title = jQuery(this).find('div.Photography-Textblock').text();
        jQuery(this).find('div.slidelink a').attr('title', title);
    });
});

Slider Revolution version 6 needs this instead:

api.on('revolution.slide.onloaded', function() {
    jQuery(this).find('rs-layer.slidelink').each(function() {
        var ref = jQuery(this).attr('data-actions').split('url:').slice(-1)[0];
        if ( typeof ref !== 'undefined' ) {
            ref = ref.split(';')[0];
            jQuery(this)
                .addClass('tp-temporarydisabled')
                .append('<a href="'+ref+'" rel="'+api+'" style="display:block"&gt;</a&gt;')
                /* optional: completely stops the slider when clicked */
                .on('click', function() { api.revpause(); })
            ;
        }
    });
    jQuery(document).trigger('post-load');  
});

The optional parts in this code are not strictly necessary but may be helpful.

2. General Settings

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

3. 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!

Success!