Custom width and height on fancybox image

Question

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

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.

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

Answer 1

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;
    }
});

See JSFIDDLE

NOTE : this is for fancybox v2.x+

---

EDIT (April 2014) :

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;
    }
});

See forked JSFIDDLE