4

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

作为标准，fancybox 的宽度和高度相对于图像的宽度和高度会发生变化，但我希望在所有图像上都是 800 宽度和 600 高度。

我想在 facebook 上创建一些熟悉的图像框，您可以在其中看到左侧的图像，以及右侧的描述和评论。

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

  • 亚XXE
4

1 回答 1

19

beforeShow一种更简单的方法是使用回调来更改fancybox打开的图像和fancybox父容器的大小，例如：

$(".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;
    }
});

见JSFIDDLE

注意：这是为 fancybox v2.x+

编辑（2014 年 4 月）：

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

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

请参阅分叉的 JSFIDDLE

于 2013-07-11T16:17:42.060 回答