Slider Revolution 6+ and Easy FancyBox

Easy FancyBox Plugin Docs

Slider Revolution 6+ and Easy FancyBox

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

Important Notes:
1) These instructions are only valid for Slider Revolution 6+, please find the old Slider Revolution version 5 instructions here.
2) The images used in this article are from Slider Revolution version 6 (courtesy Themepunch). The links in this article should help you find the relevant information in the Themepunch Revolution Slider documentation.
3) If you have built a complex slider with different layers and you wish to do more tricky things like opening a light box from a layer element, then you might find useful ideas in part 3 of the instructions for Slider Revolution 5.

1. Custom JavaScript

Open the slider for editing and open the CSS/jQuery dialog from the Slider General Options tab.

1.a Add the code

Copy this script to your slider’s Custom JS tab in the CSS/jQuery dialog frame:

123456789101112131415 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"></a>') /* optional: completely stops the slider when clicked */ .on('click', function() { API.revpause(); }) ; } }); jQuery(document).trigger('post-load'); });

NOTE: The optional part in this code is not strictly necessary but may be helpful.

1.b Adapt the API identifier

Each slider has a different 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. Use the unique identifier to replace “API” in the code from above.

Like this video:Slider Revolution 6+: Find the API identifier for your slider and adapt the original Custom JS.