Magnific Popup - 從第二個數組項目開始畫廊

Question

我想了解如何修改Magnific Popup代碼以控制創建的圖像陣列，以便從項目0（畫廊的第一個圖像）開始創建畫廊，但是從1畫廊的第二張圖片）。我需要改變畫廊中的邏輯。目前的行爲是當縮略圖從圖庫中點擊時彈出窗口畫廊與點擊縮略圖的圖像一起啓動。我需要使該數組中的下一張圖像被加載。說吧。我有一個4圖像的畫廊。縮略圖是畫廊中的第一張圖片。點擊我需要從圖庫中加載第二張圖片。任何幫助，高度讚賞！先謝謝你。

以下是功能碼。

function lightbox() { 
 
     $('.lightbox').magnificPopup({ 
 
      delegate: 'a', 
 
      type: 'image', 
 
      gallery:{ 
 
       enabled:true, 
 
       arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"><img src="img/assets/slider-left-thin-arrow.png"></button>', 
 
      }, 
 
      mainClass: 'mfp-zoom-in', 
 
      removalDelay: 500, //delay removal to allow out-animation 
 
      callbacks: { 
 
       beforeOpen: function() { 
 
        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); 
 
       } 
 
      },  
 
      closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>', 
 
      midClick: true 
 
     }); 
 
    }

Answer 1

使用beforeOpen回調，得到實例，並調用next()上的實例

callbacks: { 
    beforeOpen: function() { 
    var mfp = $.magnificPopup.instance; // instance of magnificPopup 
    mfp.next(); 
    } 
} 

更新：如果第一項不應該顯示那麼沒有必要的next()只是拼接它出items陣列和指標會好的

callbacks: { 
    beforeOpen: function() { 
     var mfp = $.magnificPopup.instance; // instance of magnificPopup  
     mfp.items.splice(0, 1); 
     mfp.updateItemHTML(); 
    } 
} 

Answer 2

謝謝新手！我能夠推進到下一個項目實例。以下是代碼。我必須修改'function（e）'到function（）並且它開始正常工作。

但是，我需要從數組集合中刪除第一項。什麼是最好的解決方案來實現這一目標？再次感謝你！

function lightbox() { 
 
     $('.lightbox').magnificPopup({ 
 
      delegate: 'a', 
 
      type: 'image', 
 
      gallery:{ 
 
       enabled:true, 
 
       arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"><img src="img/assets/slider-left-thin-arrow.png"></button>', 
 
      }, 
 
      mainClass: 'mfp-zoom-in', 
 
      removalDelay: 500, //delay removal to allow out-animation 
 
      callbacks: { 
 
       beforeOpen: function() { 
 
\t \t \t \t \t var mfp = $.magnificPopup.instance; 
 
    \t \t \t \t mfp.next(); 
 
        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); 
 
       } 
 
      },  
 
      closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>', 
 
      midClick: true 
 
     }); 
 
    }

謝謝！