简介:
这是一个新手业余设计师提出的关于如何正确创建 Magnific Popup 的问题。所以，这听起来可能有点菜鸟，但那是因为我是新手。
我想知道的:
我想知道如何创建一个 Magnific Popup，其中包括:完整的 HTML 结构、放置脚本的位置以及需要什么脚本。
我在来到 StackOverflow 之前做了什么:
花了无数个小时尝试实现 Magnific Popup，但无济于事。我得到的最终结果只是图像，当我点击它时，它会将我重定向到图像的链接。
来源:
这是文档:http://dimsemenov.com/plugins/magnific-popup/documentation.html .
这就是我要创建的:http://dimsemenov.com/plugins/magnific-popup/ - 在灯箱画廊部分。
我尝试过但失败的 HTML 结构:
<!DOCTYPE html>
<html>
<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
</head>
<body>
<div class="popupgallery">
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/></a>
<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/></a>
<a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a>
<a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"></a>
<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"></a>
<a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"></a>
<a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popupgallery').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
注意:
我还尝试将 .js 文件放在 </body> 之前，再一次，没有产生预期的结果。
我想我错过了什么，我只是不确定是什么。在 Magnific Popup 的文档中，有很多东西我不明白，但我认为它们不相关。
我希望有人能帮助我解决这个问题。
相关查询:
I can't get magnific-popup animations to work
Pop-up not showing (with magnific-popup)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup
再次感谢!非常感谢您的想法!
最佳答案
只需将 delegate: 'a' 添加到您的 jquery 函数中，并确保 img 标签包含完整的 res 图像，而 href 包含缩略图。
$('.popupgallery').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
关于javascript - 如何实现或创建 Magnific Popup？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17375713/