巨大的彈出窗口不起作用

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

首先，確保您已正確包含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'
     });
});

Answer 2

聽起來你有沖突..嘗試在document.ready函數中添加$

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

或者用jQuery替換$

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