宏伟的弹出窗口不起作用答案

【问题标题】：magnific popup not working宏伟的弹出窗口不起作用
【发布时间】：2014-02-06 10:12:11
【问题描述】：

我正在使用 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 文件。

【问题讨论】：

您的相关code 在哪里？我们可以找到错误……但第一行看起来有点……错误。
您似乎有冲突，请尝试上面的答案并告诉我们您是否仍然遇到相同的错误

标签： javascript jquery magnific-popup

【解决方案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'
     });
});

【讨论】：

错误是由 Jquery fire jquery.js:3048 触发的，所以可以肯定他正确地包含了它
我已经包含了库。

【解决方案2】：

听起来你有冲突..尝试在document.ready函数中添加$

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

或者把$替换成jQuery这个

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

【讨论】：

我认为您没有阅读我的问题。我已将它包含在 ready 函数中。
我在 rady 函数 () 中还有其他代码。那么，我必须在任何地方更改它还是应该只定义另一个准备好的函数？
只需将document.ready function 更改为其中一篇论文，并告诉我您是否仍然遇到任何错误。如果它不起作用，请提供您的整个代码。
好的，我解决了。我在 jQuery.js 之前放置了用于 magnific popup 的 js 文件。现在解决了。
好酷。下次提供更多代码，这样更容易发现错误。

【解决方案3】：

确保将 JQuery 和 Magnific js 链接放在要执行的代码之前。

如下所示：

 <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>

【讨论】：