Slider Revolution and Easy FancyBox

To make Easy FancyBox work with the Slider Revolution plugin for WordPress, follow the following steps. Note: 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/

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.

/* change revapi1 to whatever API name is being used for your slider */
var api = revapi1;
 
api.on('revolution.slide.onloaded', function() {
    jQuery(document).trigger('post-load');
    /* optional: stop 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);
    });
    /* end optional parts */
});

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

2. Optional: Set the slider’s Disable Blur/Focus Behavior option to “ON”.

This will make sure the slider pauses when the light box is opened.

It is advised to either set this option, or use the first optional line in the script above. In either case, the result is that the slider pauses when the light box is opened.

Note: You do NOT need to set both this option and the optional line in the code. One of the two is enough 🙂

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.

Next, from the “Link & SEO” tab, 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!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.