我在页面上有很多画廊,它们是从各自的按钮启动的。我喜欢在按钮旁边的页面中为画廊定义标记然后使用.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
}
});
答案 0 :(得分:5)
这不起作用,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
}
});
});