Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to open a magnific popup on page load?

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.

like image 926
Bruno Gomes Avatar asked Sep 10 '13 18:09

Bruno Gomes


People also ask

How do I open Magnific popup on page load?

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. setTimeout will not work on server cause it will depend on internet speed.

How do I show a pop up on page load?

You can use the Bootstrap . modal('show') method for launching the modal window automatically when page load without clicking anything.

How do I use Magnific popup in wordpress?

1) Add MP files to your theme's directory Create the directory magnific-popup in your theme's directory. Download the MP CSS and JS files from GitHub and put both in the magnific-popup directory: jquery. magnific-popup.


2 Answers

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);
like image 107
bbone Avatar answered Sep 28 '22 07:09

bbone


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);
});
like image 41
Syndication Avatar answered Sep 28 '22 07:09

Syndication