CODEWITHSUNDEEP
javascriptjquerymagnific-popup
toothie
toothie

Reputation: 1029

magnific popup not working

I am using Magnific Popup. 

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

This is the html:

<a href="/site-media/{{ photo.image }}" class="image-viewer"><img class="fest-content-event-content-photo" width = "100%" src="/site-media/{{ photo.thumbnail2 }}" /></a>

But, it isn't working and the console shows error:

 Uncaught TypeError: Property '$' of object [object Object] is not a function (index):30
(anonymous function) (index):30
fire jquery.js:3048
self.fireWith jquery.js:3160
jQuery.extend.ready jquery.js:433
completed

What is wrong? I have not loaded tje jquery.js file twice.

Upvotes: 3

Views: 26076

Answers (3)

Arnold Mubaiwa
Arnold Mubaiwa

Reputation: 101

Make sure that you put the JQuery and Magnific js links before the code to be executed.

Something like below:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="jquery.magnific-popup.min.js"></script>
  <script>
    $(document).ready(function () {

      $('#some-btn').magnificPopup({
        items: [
          {
            src: './9414795.jpg'
          }
        ],
        gallery: {
          enabled: true
        },
        type: 'image'
      });
    });
  </script>

Upvotes: 0

Merlin
Merlin

Reputation: 4917

It sounds like you have conflict.. try adding a $ in the document.ready function

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

Or replace the $ with jQuery this

jQuery(document).ready(function(){
      jQuery('.image-viewer').magnificPopup({
          type: 'ajax'
      });
}

Upvotes: 1

Felix
Felix

Reputation: 38102

First, make sure you've included the jQuery library properly:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Secondly, maybe there is a conflict between jQuery with other libraries, you can try to use:

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

Upvotes: 4

Related Questions