花式框更改下一个和上一个图像源

Question

我只是想知道有没有办法在点击下一个和上一个图像源之前更改它们？我只需要Fancybox自动调整图像大小，因为当我在用户点击下一个或上一个按钮后手动调整图像大小时(我需要手动调整(，图像大小不会改变，有时会被拉伸。有没有一个fancybox属性可以让我设置下一个和上一个图像的来源，这样它就可以在幻灯片和滑块上正常工作？

我设置下一个图像源的代码示例-

jQuery(".fancybox-arrow--right").on('click', function () {
var next = parseInt(index) + 1 + count;
if(next >= newborns.length)
{
console.log("Last Image");
jQuery(this).prop('disabled', true);
}
else{
console.log(next + ' Next');
var newImg = new Image();
newImg.src = newborns[next];
var height = newImg.height;
var width = newImg.width;
if (height > width){
//  jQuery(".fancybox-image").css("height","569px");
//  jQuery(".fancybox-image").css("width","379px"); 
/*  setTimeout(function(){
jQuery(".fancybox-image-wrap").css("transform","translate(274px, 44px) scale(1, 1)");   
},50);  */
} else {
//      jQuery(".fancybox-image").css("height","569px");
//      jQuery(".fancybox-image").css("width","853px"); 
/*      setTimeout(function(){                      
jQuery(".fancybox-image-wrap").css("transform","translate(136px, 44px) scale(1, 1)");
},50);  */                      
}
jQuery(".fancybox-image").attr("src", newborns[next]);          
count++;
}   
});

问题是，这取决于用户点击箭头，图像的大小无法正确调整，在幻灯片上根本不起作用。基本上，我有一个图像源阵列，我跟踪用户点击哪个图像并获取索引，通过这个索引，我可以判断哪个图像将是下一个或上一个，但这只有在用户点击图像后才知道。你们对我该怎么做有什么建议吗？

Answer 1

看起来您试图从错误的一端解决问题。不要把事情搞得过于复杂。

1( 创建您自己的点击处理程序，1(创建库项目；2( 然后手动启动fancybox；

2( 或者使用beforeLoad回调对图像源进行操作。您也可以使用afterLoad回调来调整图像尺寸(https://codepen.io/fancyapps/pen/gdVyxg?editors=1010)