1

我是 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,
4

1 回答 1

1

我知道这篇文章已有 11 个月的历史，但我想我会分享我的解决方案，以防它在未来对其他人有所帮助。

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

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

.fancybox-wrap { 最小宽度：1120px; }

第二步：调用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 
        }
    }
});
于 2014-04-09T05:55:28.880 回答