javascript 如何实现或创建一个 Magnific Popup？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17375713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement or create a Magnific Popup?
提问by chest_nut
Intro:
This is a question from a newbie amateur designer-wannabe on how to properly create a Magnific Popup. So, this might sound a little noobish, but that's because I'm a newbie.
介绍：
这是一个新手业余设计师的问题，想成为一个关于如何正确创建一个 Magnific Popup 的问题。所以，这可能听起来有点 noobish，但那是因为我是一个新手。
What I want to know:
I want to know how to create a Magnific Popup, which includes: full HTML structure, where to put the scripts and what are the scripts needed.
我想知道的：
我想知道如何创建一个 Magnific Popup，其中包括：完整的 HTML 结构、放置脚本的位置以及需要哪些脚本。
What I have done before I came to StackOverflow:
Spent countless hours of trying to implement Magnific Popup, to no avail. The end result that I'm having is just the image, and when I click on it, it redirects me to the link of the image.
来 StackOverflow 之前做过的事：
花了无数个小时尝试实现 Magnific Popup，但无济于事。我得到的最终结果只是图像，当我点击它时，它会将我重定向到图像的链接。
Sources:
This is the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html.
This is what I'm trying to create: http://dimsemenov.com/plugins/magnific-popup/- on the Lightbox Gallery section.
来源：
这是文档：http: //dimsemenov.com/plugins/magnific-popup/documentation.html。
这就是我要创建的内容：http: //dimsemenov.com/plugins/magnific-popup/- 在灯箱画廊部分。
HTML Structure I have tried, and failed:
我尝试过的 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>
Note:
I also tried putting the .js files before </body>, again, to not producing intended results.
I think that I am missing something, I'm just not sure what. In the documentation of Magnific Popup, there are a lot of things I don't understand, but I don't think they are relevant.
注意：
我也尝试将 .js 文件放在 之前</body>，再次，不产生预期的结果。
我想我错过了一些东西，我只是不确定是什么。在 Magnific Popup 的文档中，有很多我不明白的东西，但我认为它们不相关。
I hope someone out there would be kind enough to help me with this query.
我希望有人能帮助我解决这个问题。
Relevant queries:
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
相关查询：
我无法让 magnific-popup 动画工作
弹出不显示（使用 magnific-popup）
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup
Thanks again! I would really appreciate your thoughts!
再次感谢！我真的很感激你的想法！
采纳答案by Saturnix
Just add delegate: 'a'to your jquery function and make sure the img tag contains the full res image while the href contains the thumbnail.
只需添加delegate: 'a'到您的 jquery 函数并确保 img 标签包含完整的 res 图像，而 href 包含缩略图。
$('.popupgallery').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
回答by drake
Try putting "http:" before backslashes for the .js file source. Also try to use the new version of jQuery, like this:
尝试将“http:”放在 .js 文件源的反斜杠之前。也尝试使用新版本的 jQuery，如下所示：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>
