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

Answer 2

谢谢新手！我能够推进到下一个项目实例。以下是代码。我必须修改'function（e）'到function（）并且它开始正常工作。

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

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

谢谢！