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

Well, I haven't used Colorbox before but I have used similar things, and if I understand correctly, what you need it to do is change the style of the box after something's been loaded.

If you find what id/class values are applied to the Colorbox, you could make it so that when the AJAX content is loaded, a function is called to change the style of the appropriate part of the Colorbox.

Answer 2

You can call it in a callback function it provides:

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

Answer 3

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

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

Answer 4

resize() have no effect.

Answer 5

resize actually takes a jQuery object and uses that to do the resizing. Instead, you can just have the colorbox reload like this:

$(window).resize(function(){
    $.fn.colorbox.load();
});

Answer 6

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.

Answer 7

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 8

As i know, colorbox with iframe: true, cannot be resized. Color with iframe: false can resize height only (using jQuery.fn.colorbox.resize()).

Answer 9

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