我正在尝试在页面上实现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'，以下操作无效。没有它，我相信它会如您所愿]
<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>