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