Slider Revolution (revslider) integration

Home Forums Easy FancyBox Pro Slider Revolution (revslider) integration

This topic contains 4 replies, has 3 voices, and was last updated by  Pharéo 1 year, 6 months ago.

  • Author
  • #7883


    Detailed instructions can be found on 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() {
        /* 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 “” for example) there.

    Let me know how it works out!

  • #8080

    Massimo Dal Bo

    hello, i’m working to the same but with iframe . The code i use ( fron revolution) is

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

    /* no need to edit below unless you want to change the default FancyBox settings */
    api.on(‘revolution.slide.onloaded’, function() {

    jQuery(this).find(‘.fancybox’).each(function() {

    var $this = jQuery(this);
    if(!$‘a’)) $this = $this.removeClass(‘fancybox’).find(‘a’);

    $this.addClass(‘fancybox fancybox.iframe’).attr(‘rel’, ‘gallery’).fancybox({

    /* begin FancyBox options */
    width: ‘auto’,
    height: ‘auto’,
    autoSize: true,
    aspectRatio: true,
    fitToView: true,
    autoCenter: true,
    scrolling: ‘no’,
    type: ‘iframe’,
    onClosed: function() {api.revresume()}

    }).on(‘click’, function() {api.revpause()});



    In my case only Easy FancyBox settings are acepted instead of this. The fancy box is not responsive.I need responsive.
    please visit:
    and click the “camera” bottom left
    otion are 100% width and height
    thank you

  • #8082


    Hi Massimo, the parameters you are using (like aspectRatio) are mostly for FancyBox 2. This plugin integrates FancyBox 1.3 which takes these parameters

    FancyBox 2 integration is planned but not there yet.

  • #8083

    Massimo Dal Bo

    Thanks, do you Know an other plugin for wordpress that integrates fancybox2?
    there is no way to have responsive layout in fancybox 1.3?

    • #8086


      do you Know an other plugin for wordpress that integrates fancybox2?

      Not one of the free ones as Fancybox 2 license is incompatible with GPL so it is not allowed on

      With responsive you mean that it keeps aspect ratio when resized? No that is not possible with this version. You’ll have to rely on the video player to do that as the Youtube player does. But that then leaves the black bars on the sides.

      You’ll have to wait for Fancybox2 integration into the Pro extension for a better match between the two… I cannot say when it will arrive, sorry.

You must be logged in to reply to this topic.

Site by Pharéo | Hosted on The Permanently Moving Network