Magnific Popup设置

时间:2015-03-12 00:39:56

标签: popup

我刚刚回到网络开发中,如果我听起来无知,请原谅我。我正在尝试使用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>

1 个答案:

答案 0 :(得分:1)

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

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