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

Not sure what you are looking for but I found this thread while on a quest for my own solution. I have a colorbox in iframe mode. There is a button in there that when clicked, needs to replace the current colorbox with a new one. I just do this...

parent.$.colorbox({
    href: newurl,
    iframe: true,
    width: "600px",
    height: "240px",
    onClosed: function() {
    }
});

This reloads a new page into a new colorbox in the same location and the transition is very smooth.

Answer 2

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

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

Answer 3

This one is working properly brothers.

jQuery( document ).ready( function(){
var custom_timeout = ( function() {
    var timers = {};
    return function ( callback, ms, uniqueId ) {
        if ( !uniqueId ) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if ( timers[uniqueId] ) {
            clearTimeout ( timers[uniqueId] );
        }
        timers[uniqueId] = setTimeout( callback, ms );
      };
})(); 
$(".group1").colorbox({rel:'group1', width:"80%" }); 
$( window ).resize( function(){
    custom_timeout(function(){
        if( $('#cboxOverlay' ).css( 'visibility' ) ){
            $(".group1").colorbox.resize({ innerWidth:'80%' });
        }
    }, 500 );
}); 
});

Answer 4

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

Answer 5

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 6

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

});