fancybox width doesn't apply

Question

I'm trying to set up a width for the fancybox

$("a.loader").fancybox({
    width: 1000,
    height: 1050,
    autoDimensions: false,
    maxWidth : '100%'
});

Read some topics, but set up autoDimensions: false,, tried to set width with px and without it, with commas and without it. Nothing help, the fancybox appears with the same widht and height.

What is the issue?

P.S. jquery-1.8.2.min.js and jquery.fancybox.pack.js (downloaded 2 to 3 weeks ago) if that's the case.

Just added: Also, there are NO additional width that could apply on the fancy box from other css or jquery code.

Answer 1

$("a.loader").fancybox({
    'width': 1000,
    'height': 1050,
    'autoDimensions': false,
    'maxWidth' : '100%'
});

Answer 2

The documentation of FancyBox uses quote-signs like this:

$("a.loader").fancybox({
    'width': 1000,
    'height': 1050,
    'autoDimensions': false,
    'maxWidth' : '100%'
});

I also use this in this way and it works. But I'm not sure, if this is the problem.

Answer 3

If you are using fancybox v2.x then the API options are new and not compatible with previous version 1.3.x

So for fancybox v2.x the autoDimensions option doesn't exist but autoSize should be used instead. On the other hand if your view port (screen size) is smaller than the size you want in fancybox, the content will be scaled to fit into the view port. If you want to force the size, then you have to set fitToView: false.

NOTE : This is only valid for ajax, html, inline and iframe content. Images will always open either scaled to fit in the view port or in their original size ... you can't manipulate the size of images via width or height API options.

So your script for v2.x should be

$("a.loader").fancybox({
    width: 1000,
    height: 1050,
    autoSize : false,
    fitToView : false,
    maxWidth : '100%' // I don't think you need this
});

... valid for ajax, html, inline and iframe content only, not images.

Answer 4

I am using code this way and it works for me

$("a.loader").fancybox({   
    maxWidth: 1000,
    minHeight: 1050,
    autoDimensions: false,
    width: '70%',
    height: '70%'
});