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.
I figured out a solution that works for me.
This is based heavily off of all the answers posted here, so thank you for that. I would give you all a bounty if possible.
What I did was this.
Set .fancybox-title{height:0px !important;} in CSS, and add an additional style (to be used later) directly below: .fancybox-title-autoheight{height:auto !important;}
Next, in the fancybox jquery call, set autoResize: false, and min-Height: $(window).height()-100, <--the 100 is simply the margin I wanted in order for the user to notice that there is more content below the image.
Finally, in the afterShow function, set $(".fancybox-title").addClass("fancybox-title-autoheight");
This sizes the photo properly when originally opening, and allows the comments to be shown below as I wanted. The only remaining problem is when the window is resized. I tried removing the autoheight class, calling update, and then adding the CSS attribute again, but it does not seem to be working. For now, this is an acceptable solution for me.
Check out the result (may need to clear your cache, I've been working on it very recently): http://www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8
Thank you to all who participated! If there is some way to mark multiple answers as correct, just let me know and I will do so so that the original ideas I compiled can get recognition.