Magnific Popup install/initialization

Question

I'm very new to all this and having trouble installing it to my my backend code. Where does it go? Below my footer with all my JS?

Like, what does it mean by:

Popup initialization code should be executed after document ready?

Could someone please let me know if this is correct:

$(document).ready(function() {
  $('.image-link').magnificPopup({
    type:'image'
  });
}); 

I've put this inside a script tag.

Which lies underneath my closing footer but just doesn't seem to work.

Answer 1

yes, put all necessary css and js files first. js files can be included in header or footer. It doesn't matter (footer is preferred location for loading js nowadays). However, don't call the magnificPopup() function before loading necessary js files. After all are loaded you can use your code in docready like you mentioned.

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="FOLDER_WHERE_YOU_KEPT_THIS_JS_FILE/jquery.magnific-popup.js"></script>
<script>
$(document).ready(function() {
  $('.image-link').magnificPopup({
    type:'image'
  });
}); 
</script>

This should work if there no other js conflict and you created the html correctly like mentioned in the doc. Let me know if there is more confusion or if still you could not make it work...