colorboxでiframeを可変にする方法

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

colorboxでiframeを可変にする方法

みやびプリン 500 316

144 144

※この記事は10年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
※同内容の最新記事があります。
最新記事はこちら→

相変わらず仕事が遅い。
量が大量です。

辛いけど、生活のためならしかたないか・・・。
胃腸の治りもちょっと遅気味です。

さて、今日は、僕の大好きcolorboxのカスタマイズをやろうか。

colorbox
http://www.jacklmoore.com/colorbox/

ご存知の方も多いと思うけど、colorboxはiframeもライトボックス風に表示できます。

下記スクリプトでね。

$(function() {
$("セレクタ名").colorbox({iframe:true});
});

これなら、外部HTMLもなんなく表示できる。

しかし、iframeは高さを可変にすることができない・・・。
colorboxも同様で、サイズは決め打ちである。
つまり、リンク先のページサイズによって可変にする・・・、
といったことはできない。

と思ったか?

あるんです。方法が。
下記エントリーがヒントになりました。

★iframeで読み込むページの高さを取得して、heigthに代入する方法
http://www.geocities.jp/eijispace/2012/0220.html

これをヒントにcolorbox用に組み直すと下記のようになる。

setTimeout(resizeEvent,100); //処理を若干遅延させる(colorboxの処理終了後に処理させるため)

function resizeEvent() {

 var parentW = $(window.parent).width(); //ライトボックスの横位置を合わせるために親ウィンドウの横幅取得
 var cboxWidth = window.parent.$('#colorbox').width(); //ライトボックスに動的な横幅を取得
 var left = parentW/2 - cboxWidth/2; //親の横幅/2 - ライトボックス横幅/2をして、横の余白を算出

 var PageHeight = $("body").height() + 0; //iframeページの高さを取得

 var parentH = $(window.parent).height(); //ライトボックス表示の位置を調整するために親のウィンドウの高さを取得
 var dt = parseInt(window.parent.$("#colorbox").css('top')); //ライトボックスに動的に入った「top」の値を取得
 var pL = dt - (PageHeight/2); //動的なtopの値からライトボックスの高さの半分を引く
 if(pL <= 0){ var pL = 0;} //引いた値が0以下なら、0を割り当てる 
 
 window.parent.$("#colorbox").animate({
  'height': (PageHeight + 14) + 'px', //iframeの高さを、ライトボックスの高さに割り当て
  'top': pL + 'px', //算出したtopの値を割り当てる
  'left': left //算出したleftの値を割り当てる
 },400);

 //他、高さが必要なボックスにiframeの高さを入れていく
 window.parent.$("#cboxWrapper").animate({"height": (PageHeight + 14) + "px"},500);
 window.parent.$("#cboxMiddleLeft").animate({"height": PageHeight + "px"},500);
 window.parent.$("#cboxContent").animate({"height": PageHeight + "px"},500);
 window.parent.$("#cboxLoadedContent").animate({"height": PageHeight + "px"},500);
 window.parent.$("#cboxLoadedContent iframe").animate({"height": PageHeight + "px"},500);
 window.parent.$("#cboxMiddleRight").animate({"height": PageHeight + "px"},500);
}

それぞれアニメーションさせているのは、表示時に不自然にならないためである。
また、setTimeoutを使っているのは、colorboxのタグ生成が終わってから実行させるため。
もしかしたらいらないかも。

しかし、このままだと、親のウィンドウサイズを変えた時にバグってしまう。
ので、下記スクリプトを追記すると、あまり違和感なくできる。

//親ウィンドウサイズを変えたときに、上記関数を実行させる、という関数。この時、スクロールが終わったタイミングで実行させるために、setTimeoutを使用している。
var resizeTimer = null;
$(window.parent).bind('resize', function(){
 if (resizeTimer) clearTimeout(resizeTimer);
 resizeTimer = setTimeout(function(){
  resizeEvent();
 }, 400);
});

iframeのページに直接書いてもいいが、外部jsで読み込みをすれば、メンテナンスが楽だ。

でもまぁ、もっといい書き方があるかもしれない。
スクリプト強い人ご意見いただければと思います。

ちなみに、なんで、colorboxが生成するタグがわかるかというと、
モダンブラウザの(Chorome、Fire Fox、IE9など)デベロッパーツールを使えば、 Javascript実行後のソースコードが見れるからデス。

jQueryといい、スマホといい、便利な世の中になったねぇ・・・。

手軽にホームページを作成【おちゃのこさいさい】 - メイン

トラックバック(0)

トラックバックURL:

コメントする

ページトップへ戻る