Slider Revolution WP
09.27.2016
Using the FancyBox Lightbox with Slider Revolution
Load images, iframes, Ajax content, YouTube video and Vimeo video with Fancybox and Slider Revolution.
1. Install and activate the Easy FancyBox WordPress plugin
2. 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.
The rest of the script does not need to be edited, but you can edit the FancyBox options if you want. Click here for a full list of available options.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* change revapi1 to whatever API name 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(!$this.is('a')) $this = $this.removeClass('fancybox').find('a'); $this.addClass('fancybox').attr('rel', 'gallery').fancybox({ /* begin FancyBox options */ width: 'auto', height: 'auto', autoSize: true, aspectRatio: true, fitToView: true, autoCenter: true, scrolling: 'no', onClosed: function() {api.revresume()} }).on('click', function() {api.revpause()}); }); }); |
3. Set the slider's Disable Blur/Focus Behavior option to "ON".
This is needed to make sure the slider pauses when the lightbox is opened.
4. Connect your slide's content to the lightbox
There are two parts of a slide that can be connected to the lightbox. The first is to open the lightbox when the slide’s main background is clicked. And the second is to open the lightbox when a Content Layer is clicked.
4.1 Open the lightbox 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, copy the image’s url into the “Slide Link” field, along with the other options shown here:
4.2 Open the lightbox 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 image you wish to open inside the lightbox into the “Link Url” field, and also use the additional settings shown here:
Next, with the Layer still selected, add the “fancybox” class from the “Attributes” tab.
- Quick Tip: Only want single items to open in the lightbox?
Use the following modification:
Change this line:
|
1 2 3 |
$this.addClass('fancybox').attr('rel', 'gallery').fancybox({ |
to this:
|
1 2 3 |
$this.addClass('fancybox').fancybox({ |
Variation #1 - Load Ajax Content
Link to the page you wish to load your content from, and then adjust the “ajaxContentContainer” value in the script below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* change revapi1 to whatever api number is being used for your slider */ var api = revapi1; /* load a specific div from the page via Ajax */ var ajaxContentContainer = '.entry-content'; /* 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(!$this.is('a')) $this = $this.removeClass('fancybox').find('a'); $this.addClass('fancybox fancybox.ajax').attr('rel', 'gallery').fancybox({ /* begin FancyBox options */ width: 'auto', height: 'auto', autoSize: true, aspectRatio: true, fitToView: true, autoCenter: true, scrolling: 'no', onClosed: function() {api.revresume()}, ajax: { dataFilter: function(data) { return jQuery(data).find(ajaxContentContainer)[0]; } } }).on('click', function() {api.revpause()}); }); }); |
Variation #2 - Load an iFrame
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* 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(!$this.is('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()}); }); }); |
Variation #3 - Load a YouTube video
Use the following url format as the link, adjusting the video’s ID
https://www.youtube.com/embed/L9szn1QQfas?autoplay=1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* 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(!$this.is('a')) $this = $this.removeClass('fancybox').find('a'); $this.addClass('fancybox fancybox.iframe').attr('rel', 'gallery').fancybox({ /* begin FancyBox options */ width: 960, height: 540, autoSize: true, aspectRatio: true, fitToView: true, autoCenter: true, scrolling: 'no', type: 'iframe', onClosed: function() {api.revresume()} }).on('click', function() {api.revpause()}); }); }); |
Variation #4 - Load a Vimeo video
Use the following url format as the link, adjusting the video’s ID
https://player.vimeo.com/video/17426879?color=ffffff&title=0&byline=0&portrait=0
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* 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(!$this.is('a')) $this = $this.removeClass('fancybox').find('a'); $this.addClass('fancybox fancybox.iframe').attr('rel', 'gallery').fancybox({ /* begin FancyBox options */ width: 960, height: 540, autoSize: true, aspectRatio: true, fitToView: true, autoCenter: true, scrolling: 'no', type: 'iframe', onClosed: function() {api.revresume()} }).on('click', function() {api.revpause()}); }); }); |
