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行目参照） /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ *{padding: 0; margin: 0;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; } /* ハック用画像のパスを自分のサイトのものに変更します */ .TB_overlayMacFFBGHack {background: url(images/macFFBgHack.png) repeat;} .TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }  

JSファイルの書き換え箇所（9行目参照） /* * Thickbox 3.1 - One Box To Rule Them All. * By Cody Lindley (http://www.codylindley.com) * Copyright (c) 2007 cody lindley * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php */ //次のローディング画像のパスを自分のサイトのものに変えます var tb_pathToImage = "images/loadingAnimation.gif"; /*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/  

jQueryのバージョンによってグループ化機能が動作しない？！
　ここでThickBoxに重大な問題が。バグというわけではないけれど、jQueryのバージョンによってはギャラリーのグループ化機能が 使えないことが判明。つまり、Aタグにrel属性をつけていると画像が表示されなくなってしまうのです。これを回避するには thickbox.jsを開いて「TB_TempArray = $("a[@rel="+imageGroup+"]").get();」という行の「＠」一文字を削除します。 //ThickBox v3.1では79行目付近にあります var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/; var urlType = baseURL.toLowerCase().match(urlString); if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images TB_PrevCaption = ""; TB_PrevURL = ""; TB_PrevHTML = ""; TB_NextCaption = ""; TB_NextURL = ""; TB_NextHTML = ""; TB_imageCount = ""; TB_FoundURL = false; if(imageGroup){ //この行の@relの「＠」を削除してください！！ TB_TempArray = $("a[@rel="+imageGroup+"]").get(); for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {  

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

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />  

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

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

ThickBoxの基本的な書式

<a href="images/sample.png" class="thickbox" title="Sample Image"> <img src="images/sample_thumbnail.png" border="0" alt="sample" /> </a>  

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

変更前のHTML記述部分（ソースはview plainをクリックすると見やすくなります） <div id="thumbnails" class="thumbnails"> <div id="thumbnails1" class="thumbnailsSet"> <div class="thumbnail" style="background-image:url(images/thumb_sample1.jpg);">TITLE1</div> <div class="thumbnail" style="background-image:url(images/thumb_sample2.jpg);">TITLE2</div> <div class="thumbnail" style="background-image:url(images/thumb_sample3.jpg);">TITLE3</div> <div class="clearFloatLeft"></div> </div> </div>  

ThickBox仕様に変更後（ソースはview plainをクリックすると見やすくなります） <div id="thumbnails" class="thumbnails"> <div id="thumbnails1" class="thumbnailsSet"> <a href="images/sample1.jpg" title="TITLE1" rel="gallery" class="thumbnail thickbox" style="background-image:url(images/thumb_sample1.jpg);">TITLE1</a> <a href="images/sample2.jpg" title="TITLE2" rel="gallery" class="thumbnail thickbox" style="background-image:url(images/thumb_sample2.jpg);">TITLE2</a> <a href="images/sample3.jpg" title="TITLE3" rel="gallery" class="thumbnail thickbox" style="background-image:url(images/thumb_sample3.jpg);">TITLE3</a> <div class="clearFloatLeft"></div> </div> </div>