根据图像宽度更改fancybox上的填充

Question

我是javascript和jQuery的新手，我正在尝试使用Fancybox制作幻灯片。 问题是我希望图像显示在相同大小的盒子上，无论它们是纵向还是横向图像。我的图像都是700 X 525用于风景或525 X 700用于肖像。

我拥有它的方式如下所示的风景图像加载如下图所示，肖像图像如中间所示加载，我想要加载肖像图像，如下图所示，与尺寸相同的方框：

我认为我应该做的是根据图像尺寸更改左边距，但我不知道如何。

提前感谢您的帮助。

我正在使用Fancybox版本：2.1.4并且我已经设置了默认值：

        padding : 15,
        margin  : 20,

        width     : 800,
        height    : 600,
        minWidth  : 100,
        minHeight : 100,
        maxWidth  : 9999,
        maxHeight : 9999,

        autoSize   : true,
        autoHeight : false,
        autoWidth  : false,

        autoResize  : true,
        autoCenter  : !isTouch,
        fitToView   : true,
        aspectRatio : false,
        topRatio    : 0.5,
        leftRatio   : 0.5,

Answer 1

我知道这篇文章已经有11个月了，但我想我会分享我的解决方案，以防将来帮助其他人。

基本上我已经在fancybox元素上设置了一个min-width css属性，并将其与当前图像宽度进行比较，如果它更小，我将向fancybox元素添加填充，以便fancybox元素保持相同的宽度但是里面的图像是水平居中的。

步骤1：在你的css中设置fancybox元素的最小宽度。无论图像宽度如何，这都是您希望fancybox元素保持不变的宽度。

  

.fancybox-wrap {min-width：1120px; }

步骤2：在调用fancybox

时添加afterLoad函数

$(".fancybox").fancybox({ 
    afterLoad: function(current) {
        var $el = $(".fancybox-wrap").eq(0);    // grab the main fancybox element
        var getcurrwidth = current.width;       // grab the currrent width of the element
        var getdesiredwidth = $el.css('min-width'); // grab our min-width that we set from the css

        var currwidth = Number(getcurrwidth);
        var desiredwidth = Number(getdesiredwidth.replace('px', ''));


        if (currwidth < desiredwidth)
        {
            var custompadding = (desiredwidth - currwidth) * 0.5; // if the width of the element is smaller than our desired width then set padding amount
            this.skin.css({'padding-left': custompadding+'px', 'padding-right': custompadding+'px' }); // add equal padding to the fancybox skin element 
        }
    }
});