magnific-popup 基本实现不起作用

Question

我正在尝试在页面上实现 magnific-popup 的最基本示例（"Single image lightbox" 在官方示例中），但我无法让它工作 - 当点击它的缩略图时只需在浏览器中打开全尺寸图像。

这是我的代码：

<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' 添加到脚本中，但它似乎没有帮助。我想这是一些非常基本的东西，但它真的让我望而却步...

谢谢！

Answer 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 基本实现不起作用

magnific-popup basic implementation not working

html

javascript

jquery

magnific-popup