Fancybox Resize to fit content, without title

Question

I am using Fancybox on my website to display photos. I add (via JavaScript) social buttons and facebook comments dynamically in the title area after loading the photo. The problem I have is that if I let it resize as normal, it resizes to try to fit the title content on the screen as well (which can get rather long thanks to comments).

My question is this: is it possible to have fancybox resize to fit the photo on the screen, but allow the title area to overflow off the screen?

I have somewhat solved the issue by setting minHeight to 683, which prevents it from making the photo super tiny and fitting the comments onto the screen as well. The problem here is that it looks fine on a 1080p screen, but anything smaller means the photo is too large and flows off the screen as well.

If I'm not explaining it well, please view this on my site: http://www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8

Right now, the content is resized to fit a bit of the comments in, but is restrained by the minHeight. What I would like is for the photo to be much larger, filling the majority of the screen, with only a little bit of the title area below, and then users can scroll down to view the comments, etc.

Answer 1

You might want to try this:

Use JS to calculate the width and height of the window, and set the dimensions of the image dynamically, using the callback beforeShow and onUpdate:

beforeShow: function() {
    $('.fancybox-image')
        .width($(window).width())
        .height($(window).height());
},
onUpdate: function() {
    $('.fancybox-image')
        .width($(window).width())
        .height($(window).height());
},

You might also like to take a look at these similar question(s):

• Fancybox Height Resize Dynamic Content

Answer 2

I checked your site, which btw is pretty nice, to check the sizing problem. I noticed some things so, here are my suggestions and explanation.

The fancybox behaves like a container div so it adjusts to the children divs contents. fancybox-skin has two immediate children divs fancybox-outer and fancybox-title fancybox-title-inside-wrap

<div class="fancybox-skin" style="padding: 0px; width: auto; height: auto;">
    <div class="fancybox-outer">
        <div class="fancybox-inner" style="overflow: visible; width: 493px; height: 323px;">
            <img class="fancybox-image" src="/photos/Places/Garden of the Gods/IMG_0345.jpg" alt="">
        </div>
        <a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a><a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>
    </div>
    <div class="fancybox-title fancybox-title-inside-wrap" style="height: auto;">
    ...
    </div>
</div>

The fancybox-title fancybox-title-inside-wrap has height: auto; set. So it keeps adjusting to comments given inside it, by increasing its height, which causes problems to your image height. To fix this set its style as height: 200px;. Try to put !important if it does not work. Since all this is dynamic, check css and javascript both.

Update

As per your comment, height is set to auto every time you call fancybox.update(). So you need to modify your fancybox options, to prevent auto resizing. Here is what you can do :

$("a.yourlink").fancybox({
    'width'             :   500,
    'height'            :   200,
    'autoScale'         :   false,         //if using older fancybox
    'autoSize'          :   false,         //if using newer fancybox
    'autoDimensions'    :   false,
}); 

You should look into the options given here for fancybox 2.0+ .