jQuery and Colorbox: How to automatically set the height and width of an iframe colorbox

Question

I downloaded last version of colorbox jquery plugin. now i set true colorbox for iframe and inline. my problem colorbox(lightbox) not set auto height / width form external page. how to fix this ? There is a way for this?

MY colorbox function :

<script>
$(document).ready(function(){
 $(".iframe").colorbox({inline:true,iframe:true});
</script> 

Thanks

Answer 1

Because colorbox won't know what's inside the iframe, auto resize cannot work the way you expect.

I do it like that: set a default width + height when opening colorbox with these options:

{ iframe: true, innerWidth: 430, innerHeight: 370, scrolling: false, ... }

Select a size, which makes the most sense for your content: colorbox will open and load the iframe into this box. At the end of the iframe's html body, place this little script, which resizes the colorbox from within the iframe:

$(function(){
    parent.$.colorbox.resize({
        innerWidth:$('body').width(),
        innerHeight:$('body').height()
    });
});

For the second script to work, jQuery must be loaded inside the iframe. Otherwise you have to use native JavaScript to do this task.

And make sure, all images inside that iframe have a width/height set or have fully loaded. Otherwise innerWidth/innerHeight will give incorrect values.