fancybox图像上的自定义宽度和高度 [英] Custom width and height on fancybox image

问题描述

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

I wonder if it is posible to set a custom width and height on fancybox images?

作为一个标准，fancybox的宽度和高度相对于图像的宽度和高度而变化，但是我希望所有图像的宽度和高度均为800宽度和600高度.

As a standard, the width and height of the fancybox changes in relative to the width and height of the images, but i want to be 800 width and 600 height, at all images.

我想创建一个与Facebook上的图像框类似的东西，您会在其中看到左侧的图像，并在右侧看到说明和注释.

I want to create something familiar to the image-box on facebook, where you see the image at the left, and description and comments at the right.

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

Could be great if someone could help me with this... :)

• TheYaXxE

推荐答案

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

A simpler way is to change the size of both, the fancybox opened image AND the fancybox parent container using the beforeShow callback like :

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

See JSFIDDLE

注意:这是用于fancybox v2.x +

NOTE : this is for fancybox v2.x+

编辑(2014年4月):

EDIT (April 2014) :

对于当前版本的fancybox(今天为v2.1.5)，由于现在图像已设置为响应式(max-width: 100%;)，因此不必将CSS规则应用于.fancybox-image选择器.单独使用this.width和this.height可以解决问题

With the current version of fancybox (v2.1.5 as today), it's not necessary to apply css rules to the .fancybox-image selector since images are now set to be responsive (max-width: 100%;). this.width and this.height alone will do the trick

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

请参阅分叉的 JSFIDDLE

See forked JSFIDDLE

这篇关于fancybox图像上的自定义宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！