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