How can I dynamically resize the jQuery Colorbox p

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

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

I needed to use setTimeout method to made resizing work for me.
I do ajax call to get a picture, wait for 2 sec and set colorbox for this picture.
On complete I resize the colorbox with picture size.

Without timeout it didn't work for me because picture wasn't loaded completly and a got width=0, height=0 as picture's size.

$.get('/component/picture/getPicture.do?pictureId=' + id, 
       function(data) {  //callback function
           $('#pictureColorbox').html(data);  //set picture inside div on this page
           setTimeout(function(){  // set timeout 2 sec
               //create colorbox for inline content "#pictureColorbox" and call showPicture on complete
               $.colorbox({href:"#pictureColorbox", inline:true,  title:'', initialWidth:900, initialHeight:600,  scrolling:false, onComplete: function(){showPicture(id);}});
           }, 2000); 
       });

function showPicture(id) {
    var x = $('#' + id + " #picture").width();
    var y = $('#' + id + " #picture").height();
    $.colorbox.resize({innerWidth:x, innerHeight:y});
}

Answer 3

Just put this code on the page that opens in the iframe:

$(document).ready(function() {
    parent.$.fn.colorbox.resize({
        innerWidth: $(document).width(),
        innerHeight: $(document).height()
    });
});

Answer 4

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 5

So, here's another possible solution that is really easy to implement (though it will work on all colorboxes that you're calling, so depending on your situation it might not be the best). If this works for you, you can just drag and drop the code basically anywhere in your code and it will work automatically. The HEIGHT_PERCENTAGE and WIDTH_PERCENTAGE values are so that you can set how large the window will resize to relative to the overall window size. You could add some other values to create minimum sizes, etc.

    $(function() {
        $(window).bind('resize', function() {

            var HEIGHT_PERCENTAGE = .60; // '1' would set the height to 100%
            var h = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight; 
            h *= HEIGHT_PERCENTAGE;

            var WIDTH_PERCENTAGE = .40; // '1' would set the width to 100%
            var w = "innerHeight" in window 
               ? window.innerWidth
               : document.documentElement.offsetWidth;
            w *= WIDTH_PERCENTAGE;

            $.colorbox.resize({width: w, height: h});
        }).trigger('resize');
    });

Part of this answer is adapted from: https://stackoverflow.com/a/3012772/1963978

Answer 6

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();
});