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:

<!--The HTML below this comment wraps an in-line style around a registered shortcode.-->
<!--Copy the HTML below these comments onto the 'Text' tab of the Popup Editor.-->
<div style="width:400px; height:300px;"> [your_slider_shortcode] </div>

View the source on GitHub.

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.

/*
Add the following custom JavaScript to resize the Revolution Slider within your popup.
Visit the url: https://www.themepunch.com/faq/custom-css-or-javascript-for-version-5-0/
for guidance on how to add custom JS to the theme that includes RevSlider.
Copy the code below this comment and add it into the field 'Custom JavaScript' within your theme.
 */
jQuery(‘body’).on(‘click’, ‘.pum-trigger’, function() {

    jQuery(‘.pum-container’).trigger(‘resize’);

});

View the source on GitHub.

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.

<?php
/**
 *  Note: Copy the code snippet below starting on line 9 and either add it to the
 *  'functions.php' file of your project theme (or child-theme), or the editor of a
 *  WordPress plugin such as 'My Custom Functions'
 *  ( see: https://wordpress.org/plugins/my-custom-functions/ ).
 *
 */
add_action( 'wp_footer', 'my_custom_popup_scripts', 500 );
/**
 *  Resize a slider window within a popup container.
 *
 *  @since 1.0.0
 *
 *  @return void
 */
function my_custom_popup_scripts() { ?>
	<script type="text/javascript">
        (function ($, document, undefined) {

            jQuery('.pum').on('pumAfterOpen', function () {
                jQuery(window).trigger('resize');
            });

        }(jQuery, document))
	</script><?php
}

View the source on GitHub.