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

谢谢新手！我能够前进到下一个项目实例。下面是代码。我不得不修改＆＃39;功能（e）＆＃39;到function（）并且它开始正常工作。

但是，我需要从数组集合中删除第一个项目。什么是实现这一目标的最佳解决方案？再次感谢你！

＆＃13;

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() {
					var mfp = $.magnificPopup.instance; 
    				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
        });
    }

＆＃13;

谢谢！

Magnific Popup - 从第二个数组项开始画廊

2 个答案: