Colorbox: resize iframe dynamically
July 30th, 2010
As Colorbox can not auto calculate iframe’s width and height, therefore developer has to give a specific width and height when using Colorbox with iframe.
And here is my solution to resize iframe dynamically, meaning using this workaround, you can leave it for Colorbox to calculate iframe’s width and height and resize it.
$(".colorbox").colorbox(
{iframe:true,
innerWidth:0,
innerHeight:0,
scrolling:false,
onComplete:function(){
$.colorbox.resize(
{
innerHeight:($('iframe').offset().top + $('iframe').height()),
innerWidth:($('iframe').offset().left + $('iframe').width())
}
);
}
}
);
What we did here is firstly we create Colorbox with 0 width and 0 height, when it is loaded, we calculate the document size of the iframe content and resize it using Colorbox’s API
