Fancybox wrapper not auto-sizing correctly to image dimensions

Question

hi folks,

I'm having an issue with FancyBox. It's supposed to auto-resize the wrapper in accordance to the dimensions of the image. It's not doing that. Specifically it's too small. You can view what I'm talking about here:

http://www.themascot.ca/gallery_photos.php?event_ID=4

And here's the FancyBox jQuery code I've used:

$("a[rel=photo_gallery]").fancybox({
    'type'              : 'image',
    'padding'           : 10,
    'autoScale'         : true,
    'cyclic'            : true,
    'overlayOpacity'    : 0.7,
    'overlayColor'      : '#000000',
    'transitionIn'      : 'fade',
    'transitionOut'     : 'fade',
    'titlePosition'     : 'over',
    'titleShow'         : false,
    'resize'            : 'Auto'
});

Has anyone else ever run into this issue?

Thanks in advance for any help.

Answer 1

Figured it out ...

It was my CSS reset that was being tripped-up by the FancyBox CSS. I reset the box-sizing style of DIV's to 'border-box'.

The fix was to go into the FancyBox CSS and declare the wrap, outer, and inner DIV's box-sizing to be 'content-box'.

Like so:

#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 20px;
z-index: 1101;
display: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

#fancybox-inner {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
outline: none;
overflow: hidden;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-safari-box-sizing: content-box;
box-sizing: content-box;
}

Hopefully that will help somebody else that runs into this.