多畫廊與Magnific Popup

我想創建一個頁面，使用Magnific-Popup jQuery插件的幾個畫廊。我包含在div中的不同部分包含單獨的ID和包含圖像的.gallery類。多畫廊與Magnific Popup

<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，所以我不知道我是否錯過了一些明顯的東西。

來源

2013-05-20 PnkNja15

http://stackoverflow.com/questions/16603714/magnific-popup-limit-items-to-direct-siblings –

從documentation：

有一個網頁上的多個畫廊，你需要創建彈出Magnific酒店的新實例爲每個單獨的畫廊。例如

<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 
     } 
    }); 
});

希望幫助！

來源

2015-10-28 16:06:40 benbrandt

我採取了同樣的方法（因爲文檔），但它共享來自每個圖庫的所有圖像與每個畫廊，直到我重新加載頁面（使用turbolinks，也許這是問題的一部分？） –

多畫廊與Magnific Popup

回答

相關問題