magnific-popup 基本实现不起作用答案

【问题标题】：magnific-popup basic implementation not workingmagnific-popup 基本实现不起作用
【发布时间】：2020-01-10 15:41:17
【问题描述】：

我正在尝试在页面上实现非常基本的 magnific-popup 示例（官方示例中的“单图像灯箱”），但我无法让它工作 - 单击缩略图时它只是打开浏览器中的全尺寸图像。

这是我的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.image-popup-vertical-fit').magnificPopup({
        type: 'image',
        delegate: 'a',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }
    });
});
</script>
</head>
<body>
<div id="page">
<a class="image-popup-vertical-fit" href="tbig.jpg">
    <img src="tsmall.jpg">
</a>
</div>
</body>
</html>

知道可能出了什么问题吗？我在控制台中看不到任何错误。我已根据另一个主题将delegate:'a' 添加到脚本中，但似乎没有帮助。我想这是非常基本的东西，但它真的让我难以捉摸......

谢谢！

【问题讨论】：

如果你删除 delegate:'a' 它应该可以工作
不，我一开始尝试不使用它，但也不起作用......我后来才添加。

标签： javascript jquery html magnific-popup

【解决方案1】：

对于delegate:'a'，以下操作无效。没有它，我相信它会如你所愿

<html>
    <head>
        <link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
        <script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
        <script src='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js'></script>
        <script>
            $( document ).ready(function() {
                $('.image-popup-vertical-fit').magnificPopup({
                    type:'image',   // no delegate:'a'
                    closeOnContentClick:true,
                    mainClass:'mfp-img-mobile',
                    image: { verticalFit:true }
                });
            });
        </script>
        <title>Magnific Popup</title>
    </head>
    <body>
        <div id='page'>
            <a class='image-popup-vertical-fit' href='//farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg'>
                <img src='//farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg' width='150px' height='150px' />
            </a>
        </div>
    </body>
</html>

【讨论】：

我是个白痴。是的，它有效。不同之处在于链接的 magnific-popup js 源......我使用的是来自构建工具的不完整构建。
很高兴您发现了错误，现在您的代码已启动并运行！