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
Open the slider for editing and go to the Param. Slider page to edit the parameters.
1.a Add the code
Copy this code and paste it in the Custom Javascript field at the bottom of the page:
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);
});
});
NOTE: The optional parts in this code are 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.
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
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 🙂