今月はじめあたりに、弄った割には結局放置して手付かずだったThickBoxの利用先が見つかったため、改造して当ブログにも実装してみました。

今まではjQuery lightBox pluginを利用していましたが、そのまま実寸の画像を表示するため場合によってはブラウザ面積を超えてしまう画像の場合スクロールする必要があり、画面に半透明の背景を加えた場合、ブラウザによってはスクロールすることによってずれてしまう問題もありました。

あと最近のブラウザは画像をブラウザ面積にあわせて縮小する際にアンチエイリアスをかけてくれるので、だったら画像大きさをブラウザ面積によって調整するThickBoxでもいいだろうということで乗り換えることにしたのです。

Lightbox 2っぽいスキンに改造

結局jQuery lightBox pluginを選んだ理由って何だったかというと、「見た目がLightbox 2みたいだったから」なだけです。

挙動もそれそのもので、Lightboxのグループごとの前後リンクは画像の左右に表示されるのに対して、ThickBoxの前後リンクは下部のキャプションに小さく書かれているのみです。

Lightboxの直感的な挙動に慣れると、ThickBoxのように文字を探す動作は煩わしくどうも使い勝手が悪いので、ここを重点的に改造していくことにしました。

オリジナルサイズの画像へのリンクをどうするか

ThickBoxの特徴として、ブラウザ面積に応じて表示する画像の大きさを調整する点がありますが、絵を見せる側としては大きなサイズの画像へのリンクをどこに設けるかも考えどころだったので、表示している画像をクリックするか、キャプションに記述してある Original Size をクリックすることで移動できるようにしてみました。

これに関してはどのような挙動にしたらいいのか迷いましたし、どれが最適な手段化といわれると未だ良くわからないです。

完成品

だいたいこんな感じです。

唯一の問題は、ThickBoxのグループ機能を使うために、自分でrel指定を書き加えないといけないこと。

変更手段をまだ探している段階で、ここが解決されるとかなり便利になるんじゃないかな。