带有华丽弹出窗口的多个画廊答案

【问题标题】：Multiple Galleries with Magnific Popup带有华丽弹出窗口的多个画廊
【发布时间】：2013-05-20 16:37:09
【问题描述】：

我正在尝试使用 Magnific-Popup jQuery 插件创建一个包含几个画廊的页面。我在 divs 中包含不同的部分，具有单独的 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 新手，所以我不确定我是否只是遗漏了一些明显的东西。

【问题讨论】：

stackoverflow.com/questions/16603714/…

标签： magnific-popup

【解决方案1】：

来自documentation：

要在一个页面上拥有多个画廊，您需要创建一个新的每个单独画廊的 Magnific Popup 实例。例如

<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>

Javascript

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

希望有帮助！

【讨论】：

我采用了同样的方法（因为文档），但它与每个画廊共享每个画廊的所有图像，直到我重新加载页面（使用 turbolinks，也许这是问题的一部分？）