Fancybox图片的自定义宽度和高度

Question

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

通常情况下，fancybox的宽度和高度会相对于图像的宽度和高度而变化，但是我希望所有图像都是800宽和600高。

我想创建类似于Facebook上的图片框，左边显示图像，右边显示描述和评论。

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

• TheYaXxE

- TheYaXxE

Answer 1

一种更简单的方法是使用 beforeShow 回调函数改变 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），不需要对.fancybox-image选择器应用CSS规则，因为图像现在被设置为响应式的（max-width: 100%;）。this.width 和 this.height 就足够了。

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

查看分支的JSFIDDLE

- JFK

---

在v3.3.1中似乎不再起作用了。 - needfulthing

Answer 2

我正在使用FancyBox V3，对我而言，“beforeShow”无效，而“beforeLoad”有效。

- user1052478