magnific popup not working In shopify

Question

I am working on custom magnific popup with shopify site.In my header.liquid file am calling the magnific popup content.

<button id="open-popup" >Open popup</button>
<div id="my-popup" class="mfp-hide">
  popup  content here.
</div>

Here i have added the script in theme.js.liquid

$('#open-popup').magnificPopup({
  items: [
    {
      src: '#my-popup',
      type: 'inline'
    }
  ],
  gallery: {
    enabled: true
  },
  type: 'image'
});

But It shows the following error

TypeError: $(...).magnificPopup is not a function

If anyone please tell me if am i miss something like js library files .

Thanks in advance.

Answer 1

I am found the actual problem for this issue.Some of the themes having default magnific pop-up library in theme.js.liquid file.

My new theme brooklyn was having magnific pop-up library already.So it was working fine now.

So check with theme.js.liquid file having magnific popup library present or not.

Answer 2

are you sure that jQuery is included? if so, is it imported before magnificPopup?

Answer 3

I had a similar issue even though the magnificPopup code was included in my theme.js.

Don't ask me why - after wrapping the magnificPopup call in the window.onload it started working.

<script>
window.onload = function() {

  $('.open-popup').magnificPopup({
    type:'inline',
    midClick: true
  });
}