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

In the Popup Editor, scroll down to the Popup Settings box, and select the 'Display' option -> 'Size' category, and set the 'Size' option to 'Custom'. By default, the plugin sets the popup width to 640 px (pixels) and height to 380 px. Set the custom width and height attributes for your popup.  The screenshot below assigns a popup width of 400 px and height of 300 px. 

Solution #2

Wrap your slider in a <div> on the 'Text' Tab of the Popup Editor, as shown below:

Copy and paste the code snippet below to use with 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!

Copy the code snippet below starting with ‘add_action()’ all the way through the end of the file. Paste it either in: 
1)  the 'functions.php' file of your project theme ( parent or child ), or 
2) the editor of a WordPress plugin such as  'My Custom Functions'