Question

想要使用这个“项目”示例： http://codepen.io/dimsemenov/pen/sHoxp

但是我没有一个按钮，而是想为每个内联元素（如图库）设置多个按钮。例如，我如何创建第二个按钮来打开数据数组项2（paul irish）？有没有办法从按钮链接指定？谢谢！

Answer 1

我不得不做类似的事情，不知道该怎么做，所以希望以后可以帮助别人。

我的所有模态都是内联的，但我还需要页面上每个项目的列表，这样您就可以点击链接，它将在第2或第3项等打开。但仍允许您浏览图库。我根据此http://codepen.io/dimsemenov/pen/zvLny设置了我的代码，并添加了ID的附加部分。

基本上你只需要在各个链接上放置数据属性，例如data-slideid，并在打开magnific时传递它。设置完所有内容后，您可以通过传递data-slideid中的值来指定它打开的项目。如果有人有更好的解决方案，我很乐意知道！

查看我的下方

<div id="gallery1" class="mfp-hide">
   <div class="slide" data-slideid="0">slide 1</div>
   <div class="slide" data-slideid="1">slide 2</div>
   <div class="slide" data-slideid="2">slide 3</div>
</div>

// single link opens gallery starting at first slide
<p><a href="#gallery1" class="open-gallery-link" data-slideid="0">view gallery</a></p>

// individual links opens gallery starting at relevant slide
<a href="#gallery1" data-slideid="0" class="open-gallery-link">Slide1</a>
<a href="#gallery1" data-slideid="1" class="open-gallery-link">Slide2</a>
<a href="#gallery1" data-slideid="2" class="open-gallery-link">Slide3</a>



$('.open-gallery-link').click(function() {
   var itemNum = $(this).data("slideid"); // get the id
   var items = [];
   $( $(this).attr('href') ).find('.slide').each(function() {
      items.push( {
      src: $(this) 
   } );
 });

 $.magnificPopup.open({
    items:items,
    gallery: {
     enabled: true 
    }
 },itemNum); // set it in here
});

magnific popup Inline Lightbox Gallery如何从html链接指定数组中的项目

1 个答案: