Fancybox 更改下一个和上一个图像源答案

【问题标题】：Fancybox changing next & previous image sourceFancybox 更改下一个和上一个图像源
【发布时间】：2020-03-18 00:34:47
【问题描述】：

我只是想知道有没有办法在点击之前更改下一个和上一个图像源？我只需要 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++;
        }   
    });

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

【问题讨论】：

标签： jquery html fancybox

【解决方案1】：

您似乎试图从错误的角度解决问题。不要把事情过度复杂化。

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

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

【讨论】：