放大弹出式基本实现不起作用

2024-05-21 • 问答

我正在尝试在页面上实现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'添加到脚本中，但似乎无济于事。我想这是一个很基本的东西，但确实让我难以理解...

谢谢！

<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>

放大弹出式基本实现不起作用

jingyangliwei 回答：放大弹出式基本实现不起作用

大家都在问