jQuery対応のLightboxライクなメディアビューア – Shadowbox.js

jQuery

リニューアル前に導入していた、jQueryでLightbox風なエフェクトをかけて画像を表示するJavaScript「jQuery lightBox plugin」は、比較的有名なjQueryのプラグインなので、同ライブラリを愛用の方ならご存じかと思う。シンプルで設置しやすいのが特徴だが、インターフェイスが最近古く感じるようになってきた。Skinを改造して独自仕様にしてもいいが、どうせならデフォルトでかっこいいインターフェイス/エフェクトのjQuery Pluginはないものかと探し回ってみたところ、なかなか面白そうなJavaScriptを発見。早速設置してみた。

Shadowbox

Summer

このJavaScriptの凄いところは、画像のみならず、Flash、QuickTime、Windows Media、Webの表示に対応している点だ。Flashを扱うことができるので、YouTubeにも対応している。

表示のエフェクトは、ブラックベースのLightboxをもう少しモダンにしたような感じでなかなかクール。試しに右側にサンプル画像のサムネイルを設置したのでクリックしてほしい。まずブラウザのレンダリング領域が暗くなり、オーバーレイするように、枠が表示されて拡大し、最後に画像が表示される。好き嫌いはあるかと思うが、比較的上品で良い感じだ。

対応しているライブラリはjQueryのみならず、Prototype、Yahoo! User Interface Library、Ext、MooTools、Dojoなどのメジャーなライブラリに対応。サポートするブラウザは、Internet Explorer 6以上、Firefox 1.5以上、Safari 2以上、Opera 9以上だ。ほぼ問題なく、大部分のユーザーが表示することができるで、導入にも安心だろう。

設置

始めに以下のサイトにアクセスし、ダウンロードページに移動。ページ下部の「Download Full」から、Shadowsboxのソースコード一式をダウンロードしよう。

Shadowbox.js
http://www.shadowbox-js.com/

ダウンロードしたデータを解凍すると、サンプルファイルなど様々なファイルが詰まっているフォルダが解凍されるが、すべて必要なファイルという訳でもないので、とりあえずサーバにshadowboxを格納するディレクトリを設置して、必要なファイルのみをアップロードする形で進めよう。当サイトでは、/js/shadowbox/ に以下のファイルをアップロードした。

  • flvplayer.swf
  • shadowbox.js(srcフォルダより)
  • adapter(srcフォルダ内より)
  • lang(srcフォルダ内より)
  • player(srcフォルダ内より)
  • skin(srcフォルダ内より)

コーディング

次にHTMLを編集してJavaScriptや他の必要なファイルを読み込むソースコードを記述する。なお、今回はライブラリにjQueryを使用した場合のソースコードになる。(<head>〜</head>に設置)

<!-- jQueryの読み込み -->
<script type="text/javascript" src="[jQueryの設置ディレクトリ]"></script>
<!-- ShadowboxとjQueryを接続するためのアダプタを読み込み -->
<script type="text/javascript" src="[shadowbox-jquery.jsの設置ディレクトリ]"></script>
<!-- Shadowbox本体の読み込み -->
<script type="text/javascript" src="[shadowbox.jsの設置ディレクトリ]"></script>
<script type="text/javascript">
/* スキンの指定と、読み込むディレクトリの指定 */
Shadowbox.loadSkin('classic', '[skinの設置ディレクトリ]');
/* 言語の指定と、読み込むディレクトリの指定 */
Shadowbox.loadLanguage('en', '[langの設置ディレクトリ]');
/* 扱うメディアタイプの指定と、読み込むディレクトリの指定 */
Shadowbox.loadPlayer(['img', 'swf', 'flv', 'qt', 'wmp', 'iframe', 'html'], '[playerの設置ディレクトリ]');
/* ファンクションの読み込み、オプション指定 */
$(document).ready( function() {
var option = {};
Shadowbox.init(option);
});
</script>

以上で実行環境は整った。あとはaタグにrel=”shadowbox”を付加するだけで動作する。たとえば、上記にサンプルで設置した画像のように、サムネイル画像をクリックすると、Shadowboxを利用して画像を表示する場合には下記のように表記する。(サムネイル画像のファイル名は「sample_s.jpg」、画像のファイル名は「sample.jpg」とする)

<a href="sample.jpg" rel="shadowbox"><img src="sample_s.jpg" /></a>

たったこれだけだ。実に簡単かつわかりやすい。

ほぼ全てのニーズに対応するShadowbox

設置はjQuery lightBox pluginに匹敵するぐらい簡単で取っつきやすい。また、上記の説明では省いたが、言語ファイルを英語以外に指定したり、skinを自作したり、読み込むメディアタイプを指定できたり、オプション指定で表示スピードや方法などを変更できたりと、カスタマイズに優れているのもShadowboxの特徴だ。

何よりも、このかっこいいエフェクトで、YouTubeやWebページなど、様々なメディア、コンテンツを開けるので、今のところこのJavaScriptを導入しておけば、あらゆるケースにも対応できるはず。本家サイトでは、いろいろなオプション指定の方法が解説されているので、カスタマイズ好きの方は一度目を通してほしい。

related story