fancybox 图像上的自定义宽度和高度

2023-12-15

我想知道是否可以在 fancybox 图像上设置自定义宽度和高度?

作为标准,fancybox 的宽度和高度相对于图像的宽度和高度而变化,但我希望所有图像的宽度为 800,高度为 600。

我想创建一些与 Facebook 上的图像框相似的内容,您可以在左侧看到图像,在右侧看到描述和评论。

如果有人能帮我解决这个问题那就太好了...:)

  • TheYaXxE

一种更简单的方法是使用以下命令更改 fancybox 打开的图像和 fancybox 父容器的大小beforeShow回调如:

$(".fancybox").fancybox({
    fitToView: false, // avoids scaling the image to fit in the viewport
    beforeShow: function () {
        // set size to (fancybox) img
        $(".fancybox-image").css({
            "width": 800,
            "height": 600
        });
        // set size for parent container
        this.width = 800;
        this.height = 600;
    }
});

See JSFIDDLE

NOTE:这是用于 fancybox v2.x+


EDIT(2014 年 4 月):

使用当前版本的 fancybox(v2.1.5),没有必要将 css 规则应用于.fancybox-image选择器,因为图像现在设置为响应式(max-width: 100%;). this.width and this.height独自一人就能解决问题

$(".fancybox").fancybox({
    fitToView: false,
    beforeShow: function () {
        this.width = 800;
        this.height = 600;
    }
});

参见分叉JSFIDDLE

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

fancybox 图像上的自定义宽度和高度 的相关文章

随机推荐