Magnific popup 放大弹出内嵌灯箱图库如何从html链接指定数组中的项目

想要使用此“项目”示例：

但是，我不希望只有一个按钮，而是希望每个内联元素都有多个按钮（比如图库）。

---

例如，如何创建第二个按钮来打开数据数组项2（paul irish）？有没有办法从按钮链接中指定？谢谢

我不得不做一些类似的事情，不知道怎么做，所以希望这对以后的人有所帮助

我所有的modals都是内联的，但我还需要页面上每个项目的列表，这样你就可以点击链接，打开项目2或3等等，但仍然允许你在图库中导航。我的代码基于此，并添加了id的附加部分

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

查看下面我的

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

幻灯片1
幻灯片2
幻灯片3
//单链接从第一张幻灯片开始打开库

//单个链接从相关幻灯片开始打开图库
$（'.open gallery link'）。单击（函数（）{
var itemNum=$（this.data（“slideid”）；//获取id
var项目=[]；
$（$（this.attr（'href'））.find（'.slide'）.each（function（）{
物品。推送（{
src:$（本）
} );
});
$.magnificPopup.open({
项目:项目,，
画廊：{
已启用：true
}
}，itemNum）；//在此处设置它
});