Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 29, 2014 at 11:13 pm #311111
    CloudChoice

    Hi,

    I would like to open a magnific popup automatically when a specific page load.

    Eg.

    HTML
    <div id=”test-popup” class=”white-popup”>
    Popup content
    </div>

    CSS
    .white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
    }

    Which code would I use?

    TANKS

    August 30, 2014 at 6:33 pm #311331
    Josue

    Hi!

    Check the API methods for Magnific Popup – http://dimsemenov.com/plugins/magnific-popup/documentation.html#api

    Also, you could create an invisible link linking to that image and make it trigger on load, something like:

    (function($){
    $(window).load(function() {
       $('.trigger').trigger('click');    	
    });
})(jQuery);

    Cheers!
    Josue

    August 30, 2014 at 11:07 pm #311411
    CloudChoice

    HI,

    THANKS for the help.

    I used this code:

    <script>
jQuery(window).load(function(){
jQuery.magnificPopup.open({
  items: {src: '#PORRA'},type: 'inline'}, 0);
});
</script>

    <div id=”PORRA” class=”white-popup mfp-hide open”>
    Popup content
    </div>

    THANKS

    August 30, 2014 at 11:41 pm #311412
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

    October 20, 2015 at 11:34 am #521507
    Raphael

    Thanks for this snippet… I think I can use this as well.. In this case I will show how to open the magnific popup on a Menuitem and ue the standard login with the popup (so no other plugin is needed and s on no more cs and js

    First make a link Menu element and type:
    <a class="inline_popup" href="#content-to-open">Open Popup</a>

    Then in your functions.php you can insert the following

    /*   Inline Maginific Popup  für Iframe und other content */
function inline_popup_enabler(){
	?>
	<script>
		(function($){
			$(window).load(function() {
				$('.inline_popup').magnificPopup({
				  type:'inline',
				  midClick: true,
				  preloader: false				  
				});
			});
		})(jQuery);		
		jQuery(document).ready(function($) {
			       $( "#wp-submit" ).addClass("mfp-close");
			});
	</script>
    
    <div id="content-to-open" class="content_popup  mfp-hide"  >
   	<figure>
   		 <button title="" type="button" class="mfp-close">×</button>
    	<iframe src="/wp-login.php" style="border:0px #FFFFFF none;" name="reg_iframe" scrolling="no" frameborder="0" align=aus marginheight="0px" marginwidth="0px" height="600px" width="100%"></iframe>
    </figure>
    </div>
<?php
}
add_action('wp_footer', 'inline_popup_enabler');
    • This reply was modified 8 years, 6 months ago by Raphael.
    October 20, 2015 at 1:12 pm #521587
    Yigit

    Hi!


    @hunter74     Thank you for sharing your solution :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Open magnific popup automatically when a specific page load’ is closed to new replies.