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

How do I define a gallery of inline content in HTML for use with Magnific-Popup ?

本文关键字:Magnific Popup 一起 HTML 定义      更新时间:2023-09-26

我在一个页面上有很多画廊,它们都是通过各自的按钮启动的。我喜欢在按钮旁边的页面中为库定义标记,然后使用.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