Magnificent Popup - 2番目の配列アイテムからギャラリーを開始

Question

Magnificent Popupコードを変更してアイテム0（Galleryの最初のイメージ）からギャラリーを開始するために作成されたイメージの配列を制御する方法を知りたいですが、1ギャラリーの2番目の画像）。私はギャラリーのロジックを少し変更する必要があります。現在の動作は、ギャラリーからサムネイルの1つがクリックされ、サムネイルの画像がクリックされた状態でポップアップウィンドウギャラリーが起動されたときです。その配列からギャラリーの次のイメージをロードする必要があります。言わせてください。私は4つの画像のギャラリーを持っています。サムネイルはギャラリーの最初の画像です。クリックすると、ギャラリーから2番目のイメージをロードする必要があります。どんな助けも高く評価されます！前もって感謝します。

ここに機能コードがあります。

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コールバックは、インスタンスを取得し、インスタンス上

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

UPDATEをnext()を呼び出します。最初の項目は、次に表示すべきでない場合next()の必要はちょうどそれをつなぎ合わせていませんitemsアレイとインデックスのうち、良いとなるでしょう

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

Answer 2

ありがとうございました！次のアイテムインスタンスに進むことができました。以下はコードです。私はfunction（）のために 'function（e）'を修正しなければならず、正しく動作するようになりました。

ただし、配列コレクションから最初のアイテムを削除する必要があります。それを達成するための最良の解決策は何でしょうか？ありがとうございました！

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

ありがとうございます！