vladc77 vladc77 - 2 months ago 28
Javascript Question

Magnific Popup - start gallery from second array item

I'd like to learn how to modify Magnific Popup code to control the array of images created to start a gallery not from item 0 (first image of the gallery) but from 1 (second image of the gallery). I need to make small change of the logic in the gallery. The current behavior is when one of thumbnails clicked from gallery the pop up window gallery is launched with the image of the thumbnail clicked. I need to make the next image in the gallery from that array is loaded instead. Let say. I have a gallery of 4 images. The thumbnail is the first image from the gallery. On click I need to load a second image from the gallery. Any help is highly appreciated! Thank you in advance.

Here is the function code.



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

Use beforeOpen callback , get instance and call next() on the instance

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

UPDATE: If the first item should not be displayed then no need of next()just splice it out of the items array and indexes will be good

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