※ 画像は公式サイトのデモより

画像や動画などを見せる際に、デフォルトでサムネイル、クリックで拡大や再生というのはよくある方法だ。だが、その際の方法には気をつけないといけない。毎度リンク先に飛んでしまっていては、見ている方も疲れてしまう。

その点、Highslide.jsに代表されるサムネイル画像をスムーズに拡大するJavaScriptファイルは便利だ。そしてそれを拡張し、様々なファイル形式に対応したのがこのライブラリだ。

今回紹介するオープンソース・ソフトウェアはShadowbox.js、多種多様なメディアに対応したビューワーだ。

Shadowbox.jsは画像はもちろん、動画などを同一画面ないでスムーズに拡大表示、再生できる。複数の画像や動画にも対応し、ナビゲーション付きで簡単に切り替えて表示できるようにもなる。

特に面白いのはイメージマップへの対応だ。画像内にFlickrのように四角い枠を表示でき、それをクリックすると拡大画像が表示される仕組みだ。これを使うと注目させたい場所をうまく誘導できる。

また、外部サイトを含めたURL表示も便利な機能だ。お問い合わせフォームや規約を表示すると言った、これまではポップアップでやっていたような処理を一つの画面内で完結させられるようになる。

ビューワー的に使うもよし、サイト内のコンテンツを表示して利用するもよし、利用範囲の大きそうな便利なライブラリだ。

Shadowbox.js Media Viewer
http://mjijackson.com/shadowbox/index.html
michaeljackson - Google Code
http://code.google.com/p/michaeljackson/