This is going to be a quick mind-dump, and hopefully it's helpful to someone. I swear, I have plans to go back through this blog and make things sensible to the sensible reader some day, but I never take/find the time :-p
I needed a good way to automatically resize a Colorbox popup to the size of the loaded IFRAME content. Colorbox itself provides the callbacks and methods to make this possible, so it was just a problem of calculating the dimensions of the IFRAME's content. The following code assumes that the IFRAME content is on the same domain as your parent page… this code won't work across domains.
The BODY tag, being a block-level element, automatically becomes 100% the width of the IFRAME. If the content of the BODY tag is wider or narrower than the initial IFRAME width (which, since we're trying to auto-calculate the width, it's a safe assumption that the width is different) we'll need to make the BODY tag the correct width before measuring it. I do this in the following code by floating the BODY tag, then removing the float after the measurement is finished.
<![CDATA[
// Initialize colorbox for gallery links
$(function() {
if (!$.fn.colorbox) return;
// Initialize Colorbox for the IFRAME links, setting a loading width and height and
// telling Colorbox to wait until the IFRAME finishes before calling onComplete
$(".detailRow .viewGallery").colorbox({
"iframe": true,
"fastIframe": false,
"innerWidth": 480,
"innerHeight": 360,
"onComplete": function() {
// Do some work to automatically calculate the height and width of the IFRAME's content
var iframe = $("iframe.cboxIframe"),
body = iframe.contents().find("body"),
floatStyle = body.css("float");
// Float the BODY so that it assumes a minimal width
body.css("float", "left");
// Resize the colorbox
$.colorbox.resize({ "innerWidth": body.width(), "innerHeight": iframe.contents().height() })
// Remove our float style on the BODY
body.css("float", floatStyle);
}
});
});
]]>
