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

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