Width and height issue with fancybox

Question

When I've added this code no setting on width and height works

jQuery(document).ready(function() {
  $('a.iframe').fancybox(); 
});

What are the options to get around it?

Answer 1

Take a look at the documentation here: http://fancybox.net/api

You're using inline content, so make sure that you're setting the autoDimensions option to false along with the width and height settings.

UPDATE: I tested the following solution successfully:

    $('a.fbtag').fancybox({
        autoDimensions: false,
        height: 300,
        width: 400
    }); 

This assumes that the class name of the link you're opening is 'fbtag'.

Answer 2

Fancy Box width and Height always varies with the media type.

If we provide 5 * 5 pixel image - Fancy Box will show up with dimensions of Image Dimensions.

To counter the effect of media dimensions and define the default width & height for Fancy Box

Try this:

$.fancybox.open(collection.toJSON(), {
   afterShow :function(){},
   maxHeight    : 600,
   minWidth : 500           
}); 

FancyBox width will be minimum - 500 pixels.

FancyBox Height will be proportional to the FancyBox data with maximum Height of 600 pixels.