Im loading a colorbox with the code below in a node tpl file. The issue is that different nodes have different numbers of images attached so I cant use a fixed height (I dont want ugly scroll bars).

Is there a way to make the height be just as tall as it needs to be to contain all its contents without scrollbars? Thanks

Comments

The function required is:
$.colorbox.resize

However im having an issue of when to call it. If I listen for the cbox_complete event then its fired before the content is loaded with AJAX, so the height is treated 0. The timeout function below seems to work but its not completely robust and the time delay isnt the best user experience:

$(document).bind('cbox_complete', function(){
setTimeout($.colorbox.resize,1000);
});

Putting this in the tpl file of the content type thats loaded in the overlay works:

(function($) {
Drupal.behaviors.global_custom_two = {
attach : function(context, settings) {
$.colorbox.resize();
}
}})(jQuery);

I spoke too soon. In IE8 the size jumps around and then ends up being too small. In IE9 and chrome the size jumps around but does ends up correct.