magnific popup не работает

Question

Я использую Magnific Popup.

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

Это 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> 

Но это не работает, и консоль показывает ошибку:

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 

Что не так? Я не загружал файл tje jquery.js дважды.

Answer 1

Похоже, у вас есть конфликт .. попробуйте добавить $ в document.ready функции

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

Или заменить $ с jQuery это

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

Answer 2

Во-первых, убедитесь, что вы включали Библиотека jQuery должным образом:

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

Во-вторых, может быть, есть конфликт между JQuery с другими библиотеками, вы можете попробовать использовать:

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