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

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

Answer 2

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

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

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

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 5

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

});