如何在HTML中定义内联内容库,以便与Magnific Popup一起使用
How do I define a gallery of inline content in HTML for use with Magnific-Popup ?
我在一个页面上有很多画廊,它们都是通过各自的按钮启动的。我喜欢在按钮旁边的页面中为库定义标记,然后使用.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
}
});
这样不起作用,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
相关文章:
- facebook”;添加评论“;popup获胜'不要消失
- 从popup.js|Chrome扩展访问DOM
- 从Chrome扩展名中的popup.html文件在background.js文件中运行一个函数
- jQuery Modal Popup-回发后输入类型设置为null
- 如何将数据传递给Popup以及如何在Popup中读取数据
- 单击扩展图标时打开popup.html
- 将sharethis按钮添加到chrome扩展popup.html
- Javascript - 当使用 Javascript 生成 HTML 元素时,Magnific Popup 不起作用
- 使用 jQuery 保存 Popup 数据
- 使用 Javascript 保存 Popup 数据
- 无法以编程方式打开 jQuery Mobile PopUp
- 如何让 Magnific Popup 与 Browserify 一起工作
- 在 Magnific Popup 插件中使用时,无法从光谱拾色器插件中的文本框复制颜色
- 我无法让 Magnific Popup To Work (js noob)
- 如何在HTML中定义内联内容库,以便与Magnific Popup一起使用
- 为Magnific Popup定义Typescript文件
- Magnific Popup安装/初始化
- Magnific Popup iframe在内容变化时自动调整大小(跨域)
- 不能用Magnific popup和PHP样式我的DIV
- fbAlbum2.js, bootstrap-tooltip and Magnific-Popup