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 Maker content editor, and our plugin will create a popup that displays your slider!

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 to 50 pixels depending on the presence of 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:

Slider Revolution Solution

Slider Revolution ( also known as 'Rev Slider' ) sets its slider size using JavaScript, not CSS. Because the slider is hidden on page load, the size is set to 0x0 pixels. 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). The slider will then use the height and width settings added to the editor 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 Slider Revolution.  Learn how to add custom code to your Slider Revolution.

Every Other Slider Solution

The following solution works similarly to the one described above in the link for Slider Revolution. It uses PHP to load a JavaScript script.

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'
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.