16

I'm using Magnific Popup and I would like to have a video come up as soon as the page loads in a popup.

I got the plugin to work fine, but I have no idea on how to get it to pop up as soon as the page loads, without clicking on the thumbnail.

I looked around for a solution, but I did not manage to get it to work.

Artifex404
  • 108
  • 7
Bruno Gomes
  • 199
  • 1
  • 1
  • 8

2 Answers2

30

If you're using jQuery you could just listen for the window load event and then call the open method for your Magnific Popup like so:

(function($) {
    $(window).load(function () {
        // retrieved this line of code from http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
        $.magnificPopup.open({
            items: {
                src: 'someimage.jpg'
            },
            type: 'image'

          // You may add options here, they're exactly the same as for $.fn.magnificPopup call
          // Note that some settings that rely on click event (like disableOn or midClick) will not work here
        }, 0);
    });
})(jQuery);
bbone
  • 626
  • 5
  • 6
  • Thank you very much! worked perfectly! now i just need to change it to load a video instead. should i replace the type: 'image' with the word 'iframe'? and in the src: can i just add the link to the youtube video? Thanks again for the help! – Bruno Gomes Sep 10 '13 at 19:04
  • Great, glad to hear it worked. To be honest, I'm not too familiar with Magnific Popup but by the looks of the documentation that sounds right. – bbone Sep 10 '13 at 19:26
  • 1
    ya i tried it right after i posted the comment and that was the solution as well. thanks again hehe – Bruno Gomes Sep 10 '13 at 20:25
  • after closing the page refreshes and again the modal loads – San Nov 15 '13 at 07:56
  • How would you then set this to only show once. So after its closed the visitor is remembered for say 30 days before it pops up again? – pinkp Jun 14 '19 at 11:11
  • can we use callbacks option with open functions? – Fauzan Edris Mar 25 '21 at 10:05
12

I was able to get a timed modal working using jquery's setTimeout function, Just wrap .magificpopup in the settimeout function to set a delay. Change the value of 5000 (5 seconds) to whatever value you want.

See below:

$(document).ready(function () {
setTimeout(function() {
 if ($('#myModal').length) {
   $.magnificPopup.open({
    items: {
        src: '#myModal' 
    },
    type: 'inline'
      });
   }
 }, 5000);
});
Syndication
  • 121
  • 1
  • 3