thickboxについて質問です。

質問

thickboxについて質問です。

thickboxで、カスタムされたウインドウがアニメーションのようにゆっくり表示されるのを見たことがありますが、これについて詳しい方がいらっしゃいましたら、ご教授願います。
また、thickboxではウインドウサイズを固定する方法も知りたいのでよろしくお願いします。

回答No.1

fujillin · ベストアンサー

thickboxは知りませんが…

＞カスタムされたウインドウがアニメーションのようにゆっくり表示されるの
＞を見たことがありますが、～
そのサイトのソースで調べてみるのが一番かと。
カスタマイズされていると、thickboxなのかどうかも判断しにくいと思いますが、確かにthickboxなのでしょうか？

同様のライブラリで、アニメーション効果をいろいろ変化できるものもあります。（ご指摘の「ゆっくり」なのかどうかわかりませんが）
例えば
　http://colorpowered.com/colorbox/core/example1/index.html
　http://fancybox.net/dev/130/

他にもちょっと調べただけで、
Litebox、LightBox Plus、LightBox 2、GreyBox、Prototype Window、shadowbox、Highslide JS　などたくさん見つかります。
（リンクはつけてませんが、ぐぐればすぐに見つかるはず）

thickboxに話を戻すと…
単純な画像表示の場合のみトレースしてみました。（ajaxなどは除く）

表示時に以下のようなDOMが生成されているようです。
（IEだと、このほかにiframeなども生成されているようです）
<div class="TB_overlayBG" id="TB_overlay"></div>
<div style="margin-left: -265px; width: 530px; margin-top: -99px; display: block;" id="TB_window">
<a href="" id="TB_ImageOff" title="Close">
<img id="TB_Image" src="xxx.jpg" alt="title" width="500" height="139"></a>
<div id="TB_caption">title<div id="TB_secondLine"></div></div>
<div id="TB_closeWindow">
<a href="#" id="TB_closeWindowButton" title="Close">
close
</a>
or Esc Key
</div>
</div>

画像部分のidがTB_windowで、バックの部分がTB_overlayみたいなので、画像表示をアニメーションをしたければ
$("#TB_window").css({display:"block"}); //for safari using css instead of show
の部分を　show()、fadeIn()、animate()などを利用して表示させてあげればよろしいかと。
（オリジナルに、効果を使うとsafariがうまくいかないみたいなコメントがあるので、そのへんについてはご注意）

バックにも効果をつけるのであれば、バック部分は最初から表示されているようなので、生成したときに一度hide()しておいて、↑の表示の直前でfadeIn()などなどで表示すればよろしいかと思います。
バックと画像の両方に効果がある場合などは、バックの効果のコールバックで画像の方を表示すれば順番も制御可能です。

表示部分の見た目をカスタマイズしたければ、（↑）の要素生成部の内容を変えてあげればよろしいかと。
（ほとんどそのままタグで書いてあるので変更は簡単ですが、全体の処理との整合を保つように、変更しないとおかしくなります）

（以上は、あくまで単一画像のケースで、FFとIEでしか試していないので漏れがあると思いますが、そのあたりもご注意ください。）

＞ウインドウサイズを固定する方法も知りたいのでよろしくお願いします

ウインドウとはTB_windowの部分のことを意味しているのでしょうか？
画像サイズはimageWidth、imageHeightのようです。windowのサイズとの関連で調整されるようですが、サイズ調整が終わったところで、
　imageWidth = 400;
　imageHeight = 400;
みたいに固定してしまえば、常に指定したサイズになります。
（固定するのがいいのか悪いのかは不明ですが）

お礼

詳しく説明していただき誠に感謝しております。