Slider Revolution (revslider) integration

[RavanH]

Detailed instructions can be found on https://www.themepunch.com/faq/using-fancybox-with-slider-revolution/ where at Step 2 there is some javascript given to put in the Custom Javascript field for each slider.

Sadly, this script snippet causes the Easy FancyBox settings to be ignored. A (long) way around that would be to add the desired parameters manually to that snippet. But a recent support request gave me the opportunity to test an alternative on a live site running the latest Slider Revolution plugin and I found an easier approach.

A. Replace that Custom Javascript snippet with this:

/* 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);
    });
});

Triggering the ‘post-load’ event will cause a simple rescan for newly added content (in this case the Revolution Slider images) and automatic binding to them by the Easy FancyBox plugin.

B. In the Easy FancyBox settings on Settings > Media you can set Autogallery to “Galleries per Section(s)” and add div.rev_slider to the Section(s) field. Use a comma to separate it if you have other identifiers (like “div.gallery” for example) there.

Let me know how it works out!

[RavanH]

Full instructions are now in the Knowledge Base here https://premium.status301.com/slider-revolution-and-easy-fancybox/

[Author]

Posts