如何在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 =gallery1class =mfp-hide> 
< div class =slide> 
 ...幻灯片1的一些内容... 
< / div> 
< div class =slide> 
 ...幻灯片2的部分内容... 
< / div> 
< / div> 
 
< p> Blah blah< a href =＃gallery1class =open-gallery-link>查看图库一< / a> blah blah ...< / p> 
   
 
 
 
 Javascript 
  $（'。open-gallery-link'）。magnificPopup（{
 type：'inline'，
 delegate：'。slide'，
 gallery：{
 enabled：true 
} 
}）; 
  
 
 
解决方案
 $ c> delegate 总是寻找目标DOM元素的子元素（在您的情况下元素 .open-gallery-link 的子元素） p> 
 
 
您可以通过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  
 
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. However I cannot get the popup to activate when I add the delegate keyword (it does otherwise).

Here is the code I have so far,

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
  }
});

解决方案
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).

You may just parse everything via jQuery and open gallery via 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

                        
这篇关于如何在HTML中定义内联内容的库以与Magnific-Popup一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！