How can I dynamically resize the jQuery Colorbox plugin?

Question

The AJAX content loaded in a Colorbox has some JavaScript included that resizes things within the content. Colorbox determines its sizing based on the sizes before all of the AJAX happens. How can I make the Colorbox resize after the content has been loaded?

Here is a link where someone said that you can call colorbox() again after it's been loaded, but I can't figure out how to do that:

http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0

Answer 1

To dynamicly resize colorbox you want to say.

colorbox.resize({width:"300px" , height:"300px"})

If you want to resize a color box that loads an Iframe you would add something like this to the head of your target document.

$(document).ready(function(){
    var x = $('mydiv').width();
    var y = $('mydiv').height();

    parent.$.colorbox.resize({width:x, height:y});

});

Answer 2

In Colorbox 1.3, you can now call the resize function:

$('.item').colorbox.resize();

Answer 3

When you invoke the colorbox, simply add an onComplete function to it, eg

$('.mycolorboxes').colorbox({    
  onComplete : function() { 
       $(this).colorbox.resize(); 
  }    
});

Therefore each time content is loaded within the colorbox, it kicks off its resize function.