Fancybox with Revolution Slider

[jeffprewitt]

Is there a way to use Fancybox with revolution slider to display 2 different galleries on the same page?

I am trying to use a fancybox to display 3 photos. But I want to do it twice on the same slider, with the 2 fancyboxes showing different images.

Currently this is that my page looks like:

I want each “Floorplan” button to load a fancybox that shows three images that coorespond what the house located above the button.

I followed the instructions on this page to install the fancybox plugin and link the plugin to the slider:
https://www.themepunch.com/faq/using-fancybox-with-slider-revolution/

This only allows me to link 1 image to each button.

Any ideas what I need to do?

[Joao]

Hi There,

Alought I am unfamiliar with fancybox functionality you could use X Lightbox, maybe the same sytem can be applied to fancybox.

If you would apply X Lightbox functionality to a button on revolution slider, that is how you would do:

Access the page where you would be placing Revolution Slider and edit with Cornerstone.

1 - Add a Raw Code Element and add your lightbox selector, for example:

[lightbox selector=".folio-1"]

2 - You will than create a section and add all images you want to show on your lightbox, except 1 of them.

So you will add classic image elements, and add the class folio-1 to each image.

You can than click on the customize button of the section and hide it on all screen widths. So your images are there, but not visible.

3- You will go to Revolution Slider, add a text element and add the button shortcode with the launcher class folio-1 which you will link to the image which you want to show but you have not added on the page itself.

[button class="folio-1" href="http://example.com/image-1.jpg" ]

The button wont render on Revolution slider but it will render on the front end, once you click on it a lightbox with all the images will open.

If you need more information about the button shortcode, please refer to:

http://demo.theme.co/integrity-1/shortcodes/buttons/

---

Hope that helps with the implementation of the feature you are looking for.

Thank you

[jeffprewitt]

Thanks for the idea.

I have tried to do this, but when I click on the button it just fades the background but does not open the lightbox.

Any ideas what could be causing that?

When I try the same process on a page without the slider, the button opens the lightbox, but only the first image that is linked in the button. It does not open the other images that have the same class. (I put two other images on the page and hid them in a section that does not show on any device type)

Thanks for the help!

[jeffprewitt]

I was able to get the lightbox working on a page without the slider by creating three seperate buttons. However, with just the one button it still won’t work.

On the slider page I still can’t get it to work. Here is a screenshot of what it does when I say it fades out the background.

Before clicking the “Floorplan” button:

After clicking the button:

As you can see it appears to be opening the lightbox, but no images are showing in it. I have three images classified as “home-1-floorplan”. One of the is linked the button itself, and 2 others are on the page in a hidden section.

Any ideas?

[Joao]

Hi There,

If you are opening 3 different lightboxes, you need to use 3 lightbox selectors with different classes and add a different class to each button.

Please make sure your button is linked to the image you want to open in the lightbox if you want to open more images you can repeat the same class on the other images.

If you follow these instructions and it still does not work, please provide your admin credentials and point the specific page so we can take a closer look.

Thanks!