[英]How do I define a gallery of inline content in HTML for use with Magnific-Popup ?
I have many galleries on a page which are launched from their respective buttons. 我在页面上有许多画廊,它们是从各自的按钮启动的。 I like the idea of defining the markup for the galleries in the page alongside the button and then hiding using the
.mfp-hide
. 我喜欢在按钮旁边的页面中为画廊定义标记然后使用
.mfp-hide
的.mfp-hide
。 However I cannot get the popup to activate when I add the delegate
keyword (it does otherwise). 但是,当我添加
delegate
关键字时,我无法激活弹出窗口(否则)。
Here is the code I have so far, 这是我到目前为止的代码,
HTML 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 使用Javascript
$('.open-gallery-link').magnificPopup({
type:'inline',
delegate:'.slide',
gallery: {
enabled: true
}
});
It doesn't work this way, delegate
is always looking for children of target DOM element (in your case children of element .open-gallery-link
). 它不能以这种方式工作,
delegate
总是在寻找目标DOM元素的子元素(在你的情况下是元素.open-gallery-link
子元素)。
You may just parse everything via jQuery and open gallery via API: 您可以通过jQuery解析所有内容并通过API打开gallery:
$('.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 http://codepen.io/dimsemenov/pen/zvLny
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.