Latest Topic

画像の拡大表示がクールなjavascript、UvumiTools Gallery

自動で画像が替わるスライドショーのような機能はないが、画像表示の仕方がほんの少しだけクールなUvumiTools Galleryを試してみた。

上のサムネールの表示は特に変わったこともなく、普通に並んでいるだけなのだが。どれかひとつをクリックすると、全てのサムネールが左側へ移動し、奥行きがあるように上下に並ぶ。さらにクリックした画像がgalleryコンテナ（ブロック）のサイズに合わせて、拡大表示される。正しくは、用意された大きな画像を実サイズで表示するか、もしくはgalleryコンテナ（ブロック）のサイズに合わせて縮小表示をするというべきか。いずれにしても、小さなサムネール画像と大きな表示用画像を用意する必要がある。

面白いのは、マウスホイールに対応していることで、左側上下に並んだ画像のうち、中央にある画像の少し上や下でマウスホイールを回転させるとサムネールが上下に動き、止まったところの画像が右側へ大きく表示される。まるで回転ドラムをまわして画像を表示させるようでユニークだ。

またデフォルトでは、大きく表示された画像へのマウスオーバーで、画像のalt記述をキャプションとして黒背景に白文字（もちろん変更可能）で表示する。但し、同時に画像のフルパスもダイレクトリンクとして表示してしまう。このダイレクトリンクを非表示にする方法がわからなかったので、キャプション表示を切ってある。

mootoolsのpluginなので、mootools1.2以降が必要になるが、開発者のサイトからUvumiTools Gallery pluginと一緒にダウンロードできる。

開発者のサイトにはHowToが掲載されているので、とりあえずそちらを読めば自分のサイトに表示するぐらいはできるだろうが、英語で書かれているということで拒否反応を示す人たちのために、どうやったら上のようになるのかというのを少しだけ。

開発者のサイトにあるDownloadセクションからgalleyのpluguinとHTMLコードを含んだデモファイルやCSSファイル、mootools等をダウンロードしてくるのだが、このときUncompressedの方を選ぶ。また、mootoolsもこのUvumiGallery.jsだけを使用するのなら問題ないが、他にもmootoolsのプラグインを使用している場合は、注意が必要だ。

ダウンロードしたファイルを解凍するとできるgalleryという名前のフォルダに、専用にカスタマイズされたmootools、デモ用HTMLファイル、CSSファイルとコメント付きのUvumiGallery.jsファイルが入っている。

このデモ用HTMLのソースを見れば、大概のことはわかると思う。必要なjsファイルとCSSファイルを読み込んで、<script type="text/javascript"> new UvumiGallery({container:'gallery'}); </script>をつけ加え、表示画像のためのHTMLファイルを記述し、画像表示部分のgalleryコンテナ（ブロック）としてdvi要素などで囲うだけだ。もちろんCSSも合わせて記述しておく。また繰り返しになるが、表示させる画像はサムネール用と実表示用の2種類作成しておく必要がある。もっとも、表示用の画像を作ったら、ImageWellとかSqueezeとかで縦横比率を保持したまま縮小してやれば（もちろんPhotoshopでも可）サムネール用画像は簡単に作成できるから大した問題じゃない。

それよりも自分の環境にどうやって合わせるかというのが考えなければいけない部分。さて、デフォルトでサムネール画像（縦横どちらか）の表示サイズが120pxとなっているので、120px以下のサムネール（上のサムネール画像は80×60）だとマウスオーバーした際に画像が小さくなるエフェクトがかかってしまう。なので、用意したサムネール画像より小さなサイズを指定してやる必要がある。また画像間隔もデフォルトでは40pxとなっているので、上の場合、UvumiGallery.jsのoptionsで、テキストエディタ等を使いthumbSize:72、spacing:20と書き換えた。また上段に記したように、captionもfalseにしておいた。