javascript - 无法初始化放大弹出灯箱

Question

我正在尝试在我的网站中使用 Magnific Popup 插件，但我似乎无法初始化它。我已经添加了必要的标记类、CSS、初始化代码，并引用了 JS 和 CSS 文件，但没有成功。

在我的网站中，我不会再次调用 jQuery，因为它包含在 Bootstrap 中。我的浏览器控制台显示 Uncaught TypeError: $(...).magnificPopup is not a function。

代码:

<div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-lg-4 col-sm-6">
                <a href="#test-popup" class="portfolio-box open-popup-link">
                    <img src="img/portfolio/1.jpg" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-name">
                                Title
                            </div>
                            <div class="project-category text-faded">
                                Click to View
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div id="test-popup" class="white-popup mfp-hide">
                Popup content
            </div>
        </div>
</div>

<script>
$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true
});
</script>

fiddle :http://jsfiddle.net/mw6ahLzz/1/

任何帮助将不胜感激!

Answer 1

您必须在任何 Js 库之前初始化 jQuery 库，

所以

首先是 jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

然后是华丽的弹出库

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/magnific-popup.css">
<script src="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/jquery.magnific-popup.min.js"></script>

初始化弹出脚本并使其准备就绪

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

HTML

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-lg-4 col-sm-6">
            <a href="#test-popup" class="portfolio-box open-popup-link">
                <img src="img/portfolio/1.jpg" class="img-responsive" alt="">
                <div class="portfolio-box-caption">
                    <div class="portfolio-box-caption-content">
                        <div class="project-name">
                            Title
                        </div>
                        <div class="project-category text-faded">
                            Click to View
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div id="test-popup" class="white-popup mfp-hide">
            Popup content
        </div>
    </div>
</div>

Fiddle