Updated: Resizing fancybox height dynamically

Update: This tutorial is a little dated now that the newer fancybox resizes much better!

So, I know I’ve posted several times about my love for Fancybox… and this one is even better! It was for me at least. After great frustration with ajax content inside the fancybox changing and the height not adjusting correctly I’ve had to come up with several solutions, all of which were buggy. So, here’s what I’ve landed on… for now of course.

This is testing and working with Fancybox 1.3.1 (download now)

You will also need the jQuery resize event plugin.

Click here for a working example.

Our example fancybox:

$('.fancybox').fancybox({
'autoScale' : false,
'scrolling' : 'no'
});

And your link will look something like this:

<a href="/ajax.php">Show Ajax.php </a>

Inside Ajax.php you’ll want to make sure ALL of your content is inside the holder div #fancybox-content-holder (name it what you want, this is just for the example). For instance…

Ajax.php:

<div id="fancybox-content-holder">This is all my content.</div>

Please note that $.fn.fancybox.resize was tested but does not give the desired results. I hope this method helps you as much as it helped me. Please, if you have any thoughts on improvement or suggested other ways let me know as well. Thanks!
And lastly, make sure to put this inside Ajax.php. Don’t forget you need the jQuery resize event plugin.

	$('#fancybox-content-holder').bind('resize',function(){
		height = $('#fancybox-content-holder').height()+25;
		$('#fancybox-wrap').height(height);
	});