jQueryとカラーボックス：iframeカラーボックスの高さと幅を自動的に設定する方法

Question

colorbox jquery pluginの最新バージョンをダウンロードしました。今私はiframeとインラインの真のカラーボックスを設定します。私の問題colorbox（ライトボックス）は、高さ/幅のフォームを外部ページに設定しません。これを修正する方法は？これには方法がありますか？

MYカラーボックス機能：

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

おかげ

Answer 1

カラーボックスは、インラインフレームの内側に何を知ることができませんので、自動サイズ変更は、あなたが期待するように動作することはできません。

私はそのようにそれを実行します。これらのオプションでカラーボックスを開いたときにデフォルトの幅+高さを設定：カラーボックスはIFRAMEを開いて、ロードします：

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

をあなたのコンテンツのための最も理にかなってサイズを選択この箱に入れる。 IFRAMEのHTML本体の終わりには、IFRAME内からカラーボックスのサイズを変更し、この小さなスクリプト、配置：動作するように2番目のスクリプトについて

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

を、jQueryのは、インラインフレームの内側にロードする必要があります。それ以外の場合は、ネイティブJavaScriptを使用してこのタスクを実行する必要があります。

iframe内のすべての画像の幅/高さが設​​定されているか、完全に読み込まれていることを確認してください。それ以外の場合、innerWidth/innerHeightは不正な値を返します。