Sliders/Galleries/Maps Inside Popups

Compatibility

All types and forms of slider, gallery, and image plugins are compatible with Popup Maker. Simply entering the shortcode for your slider into the Popup Content Editor will create a popup with your slider inside of it!

Known Issue

Depending on what slider builder or plugin you're using, the slider content may appear too small (thumbnail), or not appear at all.

Technical Explanation

These two different, but related, issues are caused by how some sliders size themselves using JavaScript and the parent container (the popup). They rely on the parent container to determine how large the slider will be, but Popup Maker popups rely on the content to determine how large they will be (vertically).

As such, the Slider ends up with heights of 0-50 depending if you had a popup title (thumbnail).

Also, since popups are hidden when the slider type content is first initialized (with JavaScript on page load), they set the size of the slider to 0, which is also the size of a hidden element in your browser.

In other words, the popups are not visible when they initialize the sliders.

Solution #1

Use a Custom Popup Size found in the Display Settings Pane of the Popup Editor, then define specific height and width, as seen here:

Solution #2

Wrap your slider in a <div> by using Text Tab of the Popup Content Editor, as seen here:

Copy past the code below and use your slider shortcode:

Revolution Slider Solution

Revolution Slider sets its slider size using JavaScript, not CSS. Because the slider is hidden on page load they set the size to 0x0. You can define a size for it by wrapping a div around your slider code and setting that div with a specific height and width (Solution #2 above), and the slider will then use that for its sizing.

If you use CSS, you can use media queries to scale it for different devices.

An alternative to Solution #2 is to add the following custom code to your RevSlider.  Learn how to add custom code to your RevSlider.

Every Other Slider Solution

This solution is basically the same as the one for RevSlider, except it is for general use - it should even work with RevSlider as well!

Add the following code to your functions.php file:

Still need help? Contact Us Contact Us