Question

我刚刚回到网络开发中，如果我听起来无知，请原谅我。我正在尝试使用Magnific Popup设置灯箱效果。我喜欢它，因为所有的例子都使用了响应式设计。

我已按照此处的说明操作：http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool

在这里：http://www.templatemonster.com/help/js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin.html#prettyPhoto/0/

有几次，我不明白为什么弹出窗口不会出现。它只是将我链接到一个新窗口，上面有图像而不是弹出窗口。

我的标题是：

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css">

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="dist/magnific-popup.css"> 

<!-- Magnific Popup core JS file -->
<script src="dist/jquery.magnific-popup.js"></script>


</script>
<script>
$(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }

});

});
</script>

这是我的HTML：

<a class="image-popup-vertical-fit" href="images/logo.png"     title="TITLE">
<img src="images/print.png" border="0" align="center" class="image2"     /></a>

Answer 1

我遇到了同样的问题，并且设置与您相同。我以为我已经调用了jQuery库，但显然没有，因为只要在关闭我的HEAD之前添加代码（下面），一切都开始工作了！我知道这个答案大约是一年之久，但未来可能会有所帮助。

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

Magnific Popup设置

1 个答案: