Magnific Popup - Galerie vom zweiten Array-Element starten

Question

Ich möchte lernen Magnific Popup-Code zu ändern, um das Array von Bildern zu steuern, die zum Erstellen einer Galerie nicht von Element 0 (erstes Bild der Galerie), sondern von 1 (zweites Bild der Galerie). Ich muss kleine Änderungen an der Logik in der Galerie vornehmen. Das aktuelle Verhalten ist, wenn eines der Vorschaubilder aus der Galerie angeklickt wird, wird die Popup-Fenstergalerie mit dem Bild des angeklickten Miniaturbildes gestartet. Ich muss stattdessen das nächste Bild in der Galerie von diesem Array laden. Nehmen wir mal an. Ich habe eine Galerie von 4 Bildern. Das Thumbnail ist das erste Bild aus der Galerie. Beim Klicken muss ich ein zweites Bild aus der Galerie laden. Jede Hilfe wird sehr geschätzt! Vielen Dank im Voraus.

Hier ist der Funktionscode.

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

Verwenden beforeOpen Rückruf erhalten Instanz und rufen next() auf der Instanz

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

UPDATE: Wenn das erste Element nicht dann splice keine Notwendigkeit der next() nur es angezeigt werden soll, aus dem items Array und Indizes wird gut sein

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

Answer 2

Vielen Dank Novice! Ich konnte zur nächsten Exemplarinstanz weitergehen. Unten ist der Code. Ich musste 'Funktion (e)' zu Funktion() ändern und es begann richtig zu funktionieren.

Allerdings muss ich das erste Element aus der Array-Sammlung überhaupt entfernen. Was wäre die beste Lösung, um das zu erreichen? Danke nochmal!

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

Vielen Dank!