6

colorbox jquery pluginの最新バージョンをダウンロードしました。今、iframe と inline に true colorbox を設定しました。私の問題 colorbox(lightbox) は、外部ページから自動の高さ/幅を設定していません。これを修正するには？これには方法がありますか？

私のカラーボックス機能:

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

ありがとう

4

1 に答える 1

20

カラーボックスはiframeの内容を認識しないため、自動サイズ変更は期待どおりに機能しません。

私はそのようにします：これらのオプションでカラーボックスを開くときにデフォルトの幅+高さを設定します：

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

コンテンツに最も適したサイズを選択してください。カラーボックスが開き、iframeがこのボックスに読み込まれます。iframeのhtml本文の最後に、次の小さなスクリプトを配置します。このスクリプトは、iframe内からカラーボックスのサイズを変更します。

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

2番目のスクリプトを機能させるには、jQueryをiframe内にロードする必要があります。それ以外の場合は、ネイティブJavaScriptを使用してこのタスクを実行する必要があります。

また、そのiframe内のすべての画像に幅/高さが設​​定されているか、完全に読み込まれていることを確認してください。そうしないと、innerWidth/innerHeightが誤った値を示します。

于 2012-04-08T22:22:43.207 に答える