如何在HTML中使用Magnific-Popup定義內聯內容庫？

Question

我在頁面上有很多畫廊，它們是從各自的按鈕啓動的。我喜歡在頁面旁邊的按鈕上爲畫廊定義標記，然後隱藏使用.mfp-hide的想法。然而，當我添加delegate關鍵字時（無論如何），我無法獲得彈出窗口來激活。

這裏是我的代碼到目前爲止，

HTML

<div id="gallery1" class="mfp-hide"> 
    <div class="slide"> 
    ... some content for slide 1 ... 
    </div> 
    <div class="slide"> 
    ... some content for slide 2 ... 
    </div> 
</div> 

<p>Blah blah <a href="#gallery1" class="open-gallery-link">view gallery one</a> blah blah ...</p> 

的Javascript

$('.open-gallery-link').magnificPopup({ 
    type:'inline', 
    delegate:'.slide', 
    gallery: { 
    enabled: true 
    } 
}); 

Answer 1

它不以這種方式工作，delegate一直在尋找目標DOM的孩子元素（在你的情況下子元素.open-gallery-link）。

你可能只是通過API通過解析jQuery和開畫廊的一切：

$('.open-gallery-link').click(function() { 

    var items = []; 
    $($(this).attr('href')).find('.slide').each(function() { 
    items.push({ 
     src: $(this) 
    }); 
    }); 

    $.magnificPopup.open({ 
    items:items, 
    gallery: { 
     enabled: true 
    } 
    }); 
}); 

http://codepen.io/dimsemenov/pen/zvLny