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 th

Answer 1

Chris's answer got me halfway there but it caused a massive error in IE7/8 as it will call that function everytime the window resizes and even strangely on some asp.net buttons that cause a postback?!?! even when there isn't an active colorbox.

This seems to solve it:

    $(window).resize(function(){
               if ($('#colorbox').length) {
     if( $('#colorbox').is(':hidden') ) {                    
          }
         else {
           $.fn.colorbox.load();
         }
       }
    });

It checks that #colorbox exists using .length, and then checks that it's not hidden which does the trick as I could see in Firebug that when you close the colorbox it isn't fully removed/destroyed just hidden!

Hope this helps..

Answer 2

$.colorbox.resize()

This will also work on the active colorbox if you don't happen to know the selector for the active colorbox.

Answer 3

This Can be done if you can detect the height/width of the content in iframe, then you can use colorbox.resize() function to resize the colorbox again.

Answer 4

You can call it in a callback function it provides:

$(".single").colorbox({}, function(){
     alert('Howdy, this is an example callback.');
});