I can't get my Magnific popup to load on page load

Question

first of all, I know this question is already discussed in other places on this website. I've read them all but can't get my code to work.. My javascript skills are rather limited so it would be great ifsomeone could help me with this one.

I got the popup to show with animations and it works great. But I still have to click the link to show the popup. I want to load the popup when the page loads. I've seen code for this but I can't get it to work properly.

This is my code:

<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>

  <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
     -- some content ---
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('.popup-with-zoom-anim').magnificPopup({
      type: 'inline',

      fixedContentPos: true,
      fixedBgPos: true,

      overflowY: 'auto',

      closeBtnInside: true,
      preloader: false,

      midClick: true,
      removalDelay: 300,
      mainClass: 'my-mfp-zoom-in'
    });
  });
</script>

Anyone who can tell me how I need to change this code to fire the popup on page load?

Thanks in advance!

Senne

Answer 1

What you're doing is you're binding a click event on #popup-with-zoom-anim that's why it's not triggering on load. You must call the magnificpopup open method to open it onload.

Try this:

$(document).ready(function() {
    $.magnificPopup.open({
        items:{
            src: '#small-dialog',
            type: 'inline'
        },
        fixedContentPos: true,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: true,
        preloader: false,
        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
    });
});