ウィザード・コード

Uizeのサムネイル機能と画像ギャラリーを組み合わせる

 前回はUizeのクラスHover Faderで、メニューやサムネイル表示の機能を 試してみました。しかし、サムネイルについてはあのままではクリックしても何も変わりません。そこで多く出回っているJavaScriptライブラリを 利用して画像ギャラリーとして完成させることにしました。

サムネイルをクリックすると画像が拡大します

ThickBoxのセッティング

 実はUizeにもUize.Widget.ThumbZoomという画像をスムーズに拡大するクラスがあります。 しかし、ちょっとマウスを動かすだけで拡大画像が消えてしまう他、Chromeでの動作が不安定で使い勝手がよくなかったのでやめました。 画像ギャラリーのライブラリはたくさんあり、代表格はPrototype.js系のLightboxやjQueryのThickBoxなど。 ここでは導入の手軽さを考えてThickBoxを使うことにします。

jQueryとThickBoxライブラリを用意する

 jQueryはここから、(10/02/26現時点の最新バージョンはv1.4.2です)
ThickBoxライブラリこのページ から入手できます。このなかで必要なのはJSファイル(圧縮版有り)と CSSファイル、その他に ロード中を示すGIF画像ハック用画像です。

それぞれのファイルに変更箇所が二つあるので、headタグに埋め込む前に書き換えておきます。

CSSファイルの書き換え箇所(38行目参照)

JSファイルの書き換え箇所(9行目参照)

jQueryのバージョンによってグループ化機能が動作しない?!
 ここでThickBoxに重大な問題が。バグというわけではないけれど、jQueryのバージョンによってはギャラリーのグループ化機能が 使えないことが判明。つまり、Aタグにrel属性をつけていると画像が表示されなくなってしまうのです。これを回避するには thickbox.jsを開いて「TB_TempArray = $("a[@rel="+imageGroup+"]").get();」という行の「@」一文字を削除します。

HEADタグ内にJSファイルとCSSファイルを記述する

サムネイルセットの部分をThickBox仕様に書き換える

 実際にThickBoxの機能を利用するには次のような画像表示用のタグを作成します。通常はAタグ内にサムネイル画像の IMGタグを入れ、Aタグのhref属性値に画像ファイルを、title属性値にコメントを、そしてclass名には必ず"thickbox"を 設定します。

ThickBoxの基本的な書式

 これを前回のサムネイルセットのHTMLに適用するには、まずstyle属性で背景画像を設定しているDIVタグをそれぞれAタグに 変更し、クラス名に"thickbox"を追加します。さらに必要であればtitle属性を追加し、複数の画像をギャラリーとして表示したい ならば、rel属性を追加して適当な値を設定します。

変更前のHTML記述部分(ソースはview plainをクリックすると見やすくなります)

ThickBox仕様に変更後(ソースはview plainをクリックすると見やすくなります)