Question

说明：
这是一个来自新手业余设计师的问题 - 想要如何正确创建Magnific Popup。所以，这可能听起来有些小，但那是因为我是新手。

我想知道的事情：
我想知道如何创建Magnific Popup，其中包括：完整的HTML结构，放置脚本的位置以及所需的脚本。

在我来到StackOverflow之前我做了什么：
花了无数个小时尝试实施Magnific Popup，但无济于事。我所拥有的最终结果就是图像，当我点击它时，它会将我重定向到图像的链接。

来源：
这是文档：http://dimsemenov.com/plugins/magnific-popup/documentation.html。
这就是我要创建的内容：http://dimsemenov.com/plugins/magnific-popup/ - 在Lightbox Gallery部分。

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

再次感谢！我真的很感激你的想法！

Answer 1

只需将delegate: 'a'添加到jquery函数中，并确保img标记包含完整的res图像，而href包含缩略图。

$('.popupgallery').magnificPopup({ 
    type: 'image', 
    delegate: 'a', 
    closeOnContentClick: true, 
    image: { 
        verticalFit: false 
    } 
});

Answer 2

尝试在.js文件源的反斜杠之前加上“http：”。还尝试使用新版本的jQuery，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>

如何实现或创建Magnific Popup？

2 个答案: