Question

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

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

我想在Facebook上为图像框创建一些熟悉的内容，您可以在其中看到左侧的图像，以及右侧的描述和注释。

如果有人可以帮我解决这个问题，可能会很棒......：）

TheYaXxE

Answer 1

更简单的方法是使用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

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

1 个答案: