thickboxでブラウザのウィンドウサイズによって可変させる。

thickboxでHTMLをiframeつかって表示させるときに、サイズを決め打ちにしなければならないみたいです。
デフォルトだとどうやら、横が「630px」、縦が「600px」のようです。

固定にすると、ネットブックとか小さい画面ではみれなかったりします。
リンクのパラメータで縦横のサイズを指定できますが、小さい画面のことを考えて作ると大きい画面で表示したときに、変になってしまいます。
%で指定すればいいんだろうけど、うまくできなかったので、自分で修正してみました。
今回は、ブラウザのウィンドウサイズの80%で表示させるように修正しています。

まず、thikcbox.jsの一番したに以下のコードを加えます

1
2
3
4
5
6
7
8
9


function custom_default_width() {
 var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 return width * 0.8;
}

function custom_default_height() {
 var height =  window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
 return height * 0.8;
}

次に、thickbox.jsの187行目にある以下のコードを書き換えます。

1
2


TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
 TB_HEIGHT = (params['height']*1) + 40 || 600; //defaults to 440 if no paramaters were added to URL

上記のコードを以下のようにしてください。

1
2


　TB_WIDTH = (params['width']*1) + 30 || custom_default_width(); //defaults to 630 if no paramaters were added to URL
　TB_HEIGHT = (params['height']*1) + 40 || custom_default_height(); //defaults to 440 if no paramaters were added to URL

これで、画面サイズの80%でThickBoxを表示できるようになります。

参考サイト
http://www.kantenna.com/pg/2007/06/post_23.php