I'm on chrome developer edition. The library is not loaded and I can't figure out why. The error is reported in the chrome console. This is my code:

<ul><li><a class="mediaimage-link" href="~/img/HP/mediakit/The-CorPath-Vascular-Robotic-System_HR.jpg"><img src="~/img/HP/The-CorPath-Vascular Robotic-System-187.jpg" alt="">
</a></li>
<li><a href=";amp;showinfo=0" class="popup-youtube"> <img src="~/img/HP/Iyer-Video-187.jpg" alt=""></a>
         </li>
</ul>

I'm on chrome developer edition. The library is not loaded and I can't figure out why. The error is reported in the chrome console. This is my code:

<ul><li><a class="mediaimage-link" href="~/img/HP/mediakit/The-CorPath-Vascular-Robotic-System_HR.jpg"><img src="~/img/HP/The-CorPath-Vascular Robotic-System-187.jpg" alt="">
</a></li>
<li><a href="https://www.youtube.com/watch?v=TnQsToiKKgw?rel=0&amp;showinfo=0" class="popup-youtube"> <img src="~/img/HP/Iyer-Video-187.jpg" alt=""></a>
         </li>
</ul>

$(document).ready(function() {
  //Media Image Popup
  $('.mediaimage-link').magnificPopup({type:'image'});
  //Video Iframe Popup
    $('.popup-youtube').magnificPopup({
          disableOn: 700,
          type: 'iframe',
          mainClass: 'mfp-fade',
          removalDelay: 160,
          preloader: false,
          fixedContentPos: false
        });
});`

• javascript
• html
• magnific-popup

• add jquery file – Mahi Commented Oct 24, 2016 at 12:27
• jsfiddle.net/t5f5e5zw/52 – Mahi Commented Oct 24, 2016 at 12:33

3 Answers 3

You may not have included the JQuery library in your code. Remember that the JQuery file must be placed above all other Javascript code.

$(document).ready(function ($) {
    $('.test-popup-link').magnificPopup({
    type: 'image',
    gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
          }
    // other options
  });
  });

just pass $ in $(document).ready(function ($) and it will be start working

I just got exactly the same problem today: magnificPopup did work fine since weeks. And suddenly I'm getting the same "magnificPopup is not a function" error.

Adding the $ into line (document).ready(function ($) { fixed the problem for me, but I'm still wondering why (just like Rick above).

Even the documentation at https://dimsemenov.com/plugins/magnific-popup/documentation.html still says, the call goes like this:

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