magnific-popup - 多个带有宏伟弹出窗口的画廊

Question

我正在尝试使用Magnific-Popup jQuery插件创建一个包含一些图库的页面。我在div中包含不同的部分，具有单独的ID和包含图像的.gallery类。

<div id="content_1">
    <p>Some content</p>
    <div class="gallery">
        <a href="img/pic_1"><img src="img/pic_1.jpg"></a>
        <a href="img/pic_2"><img src="img/pic_2.jpg"></a>
    </div>
</div>
<div id="content_2">
    <p>More content</p>
    <div class="gallery">
        <a href="img/pic_3"><img src="img/pic_3.jpg"></a>
        <a href="img/pic_4"><img src="img/pic_4.jpg"></a>
    </div>
</div>

为了使画廊在弹出窗口中分开，我为每个内容节多次初始化了脚本。但是，当我执行此操作时，在第一个内容部分之后，图库弹出窗口中的图像比我链接的图像多(准确的两倍)。我是javascript的新手，所以不确定我是否只是缺少明显的东西。

Answer 1

从documentation:

To have multiple galleries on a page, you need to create a new instance of Magnific Popup for each seperate gallery. For example

<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #1)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #1)</a>
</div>
<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #2)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #2)</a>
    <a href="http://vimeo.com/123123" class="mfp-iframe">Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.</a> 
</div>

Java脚本

$('.gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
        delegate: 'a', // the selector for gallery item
        type: 'image',
        gallery: {
          enabled:true
        }
    });
});

希望对您有所帮助!