マウスクリックで拡大画像を表示するシンプルでスマートなPopBox
2007年12月にリリースされたPopBox.js, v2.5を使っていたのだが、このJavaScriptの説明をしていなかったことに今さらながらに気がついたので、簡単に説明を。尚、現在のバージョンは2.7aになっている。
実際の動作を見るとわかりやすい、左の鎌倉の写真をクリックすればどのような動作をするのか確認できる。もう少しというなら一例を、
Runey's web：犬の写真のサムネールを並べてあって、そのサムネールをクリックすると拡大画像を表示する。つまりは、サムネールと拡大画像として表示する実画像を用意しておくことで、サムネールをクリックすると実画像が表示されるわけだが、そのときのエフェクトで拡大したように見える。さらには、サムネールも元の場所に表示されなくなるので、よけいに錯覚を起こしやすい。また表示された画像をクリックすると、サムネールへ戻るような感じに見えることも画像を拡大表示させたように感じる理由だろう。
LightBox等のエフェクトも最初は面白いけれど、サイトのオープニングに見せられるFlashと同様に、スキップしたくなることがある。スライドショー的な要素はないが、PopBoxはとてもシンプルで、その動作も速い。
スライドショー的な要素が欲しいとか、もっと高機能なライブラリーはというならHighslide.jsをためしてみるといいかも？
但し、ライセンス条項を確認することを忘れないように。
さて本題のPopBoxの設定について。まあ開発者のサイトには、なにができるか書いてあるし、ダウンロードできるScriptには、インストールインストラクションのreadme.htmlファイルが同梱されている。さらには、クイックスタートからカスタマイズの説明、グローバル変数の説明とかなり内容のあるドキュメントページへのリンクがあるから、通常の設置は問題ないと思う。
とはいえ、書かれているのは英語なので拒否反応が出てしまう人もいるだろうから、簡単に説明を。
まずは、開発者のサイトからPopBox.jsをダウンロードしてきて、自分のサイトにコピーしてHTMLファイルに読み込ませる。例えば、scriptsフォルダそのままコピーした場合には
<head></head>間に<script src="scripts/PopBox.js" type="text/javascript"></script>と記述する。scriptsフォルダのパスは個々のサイトに合わせて書き換えること。続けて、
<script type="text/javascript">
popBoxWaitImage.src = "images/spinner40.gif";
popBoxRevertImage = "images/magminus.gif";
popBoxPopImage = "images/magplus.gif";
</script>
と記述。このときもimagesフォルダのパスは個々のサイトに合わせて書き換えること。画像の設置はソースを見れば解るように、例えば左上の写真の場合は次のように記述されている。
<img src="images/kamakura/th_kamakura_05.jpg" alt="鎌倉御霊神社" class="PopBoxImageSmall" onclick="Pop(this,100,'PopBoxImageLarge');" pbsrc="images/kamakura/kamakura_05.jpg" pbCaption="鎌倉御霊神社" />
最初のimg srcでサムネール画像のパスを、pbsrcで実画像のパスを記述。サムネール画像のクラスは当然ながら"PopBoxImageSmall" で、クリックしたときにこのimg srcをpbsrc表示まで100×[（1/100秒）/pixel]に指定している。PopBoxImageLargeはpbsrcで指定した画像のクラス。この両方のクラス指定により画像へのマウスオーバー時にカーソルが変わる。
pbshowpopbarはサムネール画像の右上の部分に出る＋アイコンの有無とテキスト表示を指定する。falseとすれば表示されない。pbCaptionは画像のキャプションを記述する。HTMLが使える。見た目はCSSで個々に設定すること。
ちなみにデフォルトでは、サムネール画像の上にClick to expandとテキストが表示されるので、左上の写真の場合は前記したようにスクリプトの1223行目をfalseに、1227行目var popBoxPopBarAboveをfalseに、また同じように拡大画像の上に半透明のバー及びClick the image to shrink itとテキストが表示されるので、スクリプトの1214行目及び1215行目をfalseにしてある。
