Open Meta Slider Gallery in Fancybox Lightbox with a button?

[Todd McMiniment]

I think the title says it all.

I want to be able to open a Meta Slider gallery in my fancybox lightbox with the click of a button. No clue how to pull this off.

Any help?

[Rolf]

Hi Todd, I’ll have to take a closer look at the Meta Slider. To make sure: is that https://wordpress.org/plugins/ml-slider/?

[Todd McMiniment]

Correct! Thank you for looking into it. I made the assumption that it would be easy and I’m in a bit over my head.

[Rolf]

Ok, if I understand you correctly, you want a button on your site that (when clicked) opens a FancyBox light box in which you can see a slider that is managed by MetaSlider.

This can be done, following these steps:

A. Prepare FancyBox
Go to Settings > Media, enable the option “Inline Content” and save.

B. Get your slider shortcode
1. Go to your MetaSlider admin page and either create a new slider or open the slider that you want to use.

2. Scroll down to find on the right side the block “How to use”.

3. Click on the shortcode there (it looks like with [metaslider id="xxx"]) which will copy that code to your clipboard.

C. Add the button and popup to your content.
1. Now go to edit the page or post where you want your button to appear and add a HTML block (or switch to the HTML tab if you are using Classic Editor). If you prefer the button in a widget area, then go to Appearance > Widgets and add an HTML widget.

2. Now paste the shortcode there with Ctr+v.

3. Next, copy/paste this code before the shortcode:

< a href="#slider-1" class="fancybox-inline button">BUTTON TEXT</a>
< div class="fancybox-hidden">
< div id="slider-1" style="width:600px;height:400px">

4. Next, copy/paste the following code after the shortcode:

< /div>
< /div>

5. Now edit the code once more:
– remove each space that appears right after each < in the code (the space was added to make the forum not parse these code snippets as html)
– adapt the style="width:600px;height:400px" in the code above to better fit your slider
– change the BUTTON TEXT to the text you want.

6. Then save your post/page and test the link. It may not look like a button yet if your theme does not support the “button” class, but the link should already open the light box and show your slider.

D. Style your link as a button (optional)
Your theme may already have style rules for the class button but if not, then you have two options: 1. Add your own style rules or 2. use another class that is inside your theme style.css. The second option may be available if you notice that your theme is using call to action buttons in the front page hero area/header for example. You’ll have to find out which class these buttons use and adapt the example code (above, used in your post/page/widget) to use the same class. But if this is not possible, then I suggest the following:

To make the link appear as a button, add the following CSS code in the theme Appearance > Customize > Additional CSS field:

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

This CSS example is from https://www.w3schools.com/css/css3_buttons.asp where you can find more examples. But you can adapt it to anything you like. There are many examples out there if you do a search for “css button example” 🙂

[Todd McMiniment]

Well… it works! BUT, not quite as I expected. Sent you a PM. Thank you for your help!!!

[Author]

Posts