ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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

ピクチャ 8.png

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

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

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

ピクチャ 9.png

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

ピクチャ 10.png

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

ピクチャ 11.png

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

Shadowbox.js Media Viewer

http://mjijackson.com/shadowbox/index.html

michaeljackson - Google Code

http://code.google.com/p/michaeljackson/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2