莊重的彈出式內聯燈箱畫廊如何從HTML鏈接

Question

陣列指定項目想利用這個「項目」例如： http://codepen.io/dimsemenov/pen/sHoxp

但不是有一個按鈕，我想有多個按鈕爲每個在線元素（如畫廊）。 例如，如何創建可打開數據數組項2（保羅愛爾蘭語）的第二個按鈕？有沒有辦法從按鈕鏈接指定？謝謝！

Answer 1

我不得不做類似的事情，不知道該怎麼做，所以希望這可以幫助以後的人。

我所有的模式都是內聯的，但我也需要一個頁面上的每個項目的列表，所以你可以點擊鏈接，它會打開項目2或3 etc ..但仍然允許您瀏覽畫廊。我將我的代碼從http://codepen.io/dimsemenov/pen/zvLny中除去，並添加了id的附加部分。

基本上，您只需將數據屬性（例如數據幻燈片）放置在單個鏈接上，並在打開magnific時將其傳遞。設置好所有內容後，您可以通過傳遞數據slideid中的值來指定打開哪個項目。如果有人有更好的解決方案，我很想知道！ http://codepen.io/mandymichael/pen/Pwmwdr/

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

-

上codepen或下面看看我的代碼