ThickBoxをカスタマイズしてみる
2008.6.12 木曜日
最近、Javascriptのライブラリは専らjQuery派なので、
画像とかをポップアップで出すときはThickBoxを使うことが多いです。
この手のライブラリはLightBoxも有名だけど、
ThickBoxは画像だけじゃなくてHTMLの表示とかにも使えて便利。
大体、普段は見た目だけカスタマイズしてそのまま使ってるんだけど、
表示の際にパッと出てきたり、
画像をグループ化してギャラリー表示する時、一旦消えてパッと切り替わる挙動が若干気になったので、
ちょっと中身いじって、試しにLightBoxっぽくアニメーションするようにしてみる。
ひとまずお試しなのでそんな対した改変はしてなくて、
表示をするtb_show()関数を2つに分けて、
tb_open() { 黒背景＆表示枠を表示 }
↓
tb_show() { リサイズアニメーション＆中身表示 }
として、
ページ切り替え時は、表示枠を消さずにtb_show()を実行させることでそのままリサイズに繋げてます。
いじったのは画像表示部分だけなので、その他(HTML表示とか)は恐らくそのまま動くはず…。
jQueryのanimate()をそのまま使用しただけなので、イージングもされてないし動きが固い。
LightBoxくらいまで派手にエフェクトさせるのはちょっとやり過ぎだとは思うけど、もうちょっと何とかすべきかな…。
あと、検証も超不十分。
また時間ある時にちゃんと作ります。
＃追記
2008.06.13 ちと改良。