jQuery和Colorbox:如何自动设置iframe颜色框的高度和宽度

时间:2012-04-08 22:03:10

标签: jquery colorbox

我下载了colorbox jquery plugin的最新版本。现在我为iframe和内联设置了真正的颜色框。我的问题colorbox(灯箱)没有设置外部页面的自动高度/宽度。怎么解决这个问题?有办法吗?

我的彩盒功能:

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

由于

1 个答案:

答案 0 :(得分:20)

因为colorbox不知道iframe里面有什么内容,所以自动调整大小不会按照你期望的方式工作。

我这样做:使用以下选项打开colorbox时设置默认宽度+高度:

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

选择一个尺寸,这对您的内容最有意义:颜色框将打开并将iframe加载到此框中。 在iframe的html正文结尾,放置这个小脚本,从iframe中调整颜色框的大小:

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

要使第二个脚本起作用,必须在iframe中加载jQuery。否则,您必须使用本机JavaScript来执行此任务。

并确保iframe内的所有图像都设置了宽度/高度或已完全加载。否则innerWidth / innerHeight将给出不正确的值。