如何在HTML中定义内联内容库以与Magnific-Popup一起使用?

我在页面上有许多画廊,它们是从各自的按钮启动的。 我喜欢在按钮旁边的页面中为画廊定义标记然后使用.mfp-hide.mfp-hide 。 但是,当我添加delegate关键字时,我无法激活弹出窗口(否则)。

这是我到目前为止的代码,

HTML

 
... some content for slide 1 ...
... some content for slide 2 ...

Blah blah view gallery one blah blah ...

使用Javascript

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

它不会这样工作, delegate总是在寻找目标DOM元素的子元素(在你的情况下是元素.open-gallery-link子元素)。

您可以通过jQuery解析所有内容并通过API打开图库:

 $('.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