Shadowbox.js 2.0 #1

Flashのデモを載せるのに良いものはないかと探しているとShadowboxというJavaScriptがあった。

Shadowbox.js
http://mjijackson.com/shadowbox/

このShadowboxはlightbox.jsがマルチメディア対応にしたようなものと表現すればよいのかな。
スタンドアローンでも機能するけれど、prototypeやYUI、jQueryなどのアダプターとしても機能する優れもので、Flash・FlashVideo・QuickTime・WindowsMedia・html・iframe・画像・イメージマップに対応。また、スライドショー表示が可能らしい。

ここではスタンドアローンでの簡易設定方法をご紹介。

1. 以下のURLよりフルパッケージ（Download Full）をダウンロードする。
   http://mjijackson.com/shadowbox/doc/download.html
2. 解凍してできたフォルダ内に[src] というフォルダがあるので、これを"shadowbox"（任意名称で可）に名称変更する。
   ※以下shadowboxフォルダと記載。
3. shadowboxフォルダと同階層にある[flvplayer.swf]をshadowboxフォルダに移動する。

FLVを表示するために必要なflvplayer.swfのパスが相対パスになっているので、ブログ記事などで使用する場合に不都合なので、shadowboxフォルダ/shadowbox.jsの"flvplayer.swf"という記述を絶対パスに変更しておくと良いと思います。
"flvplayer.swf"という記述は一カ所しかないのでわかると思います。

1. shadowboxフォルダをサーバーの任意のディレクトリにアップロードする。
   ※ここではサーバールートのjsディレクトリとした。
2. shadowbox.jsを使用したいHTMLを編集する。

headタグ内

<script type="text/javascript" src="./js/shadowbox/shadowbox-base.js"></script>
<script type="text/javascript" src="./js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', './js/shadowbox/skin'); // デフォルトスキン
Shadowbox.loadLanguage('en', './js/shadowbox/lang'); // 言語設定（jaは現状無い）
Shadowbox.loadPlayer(['img', 'swf', 'flv', 'html', 'iframe', 'qt','wmp'], './js/shadowbox/player'); // 何を表示するか（ここでは全て）
window.onload = function () {
	Shadowbox.init();
}
</script>

bodyタグ内

<a rel="shadowbox" href="http://digitrick.net/labs/images/20080702125.jpg">サンプル</a>

サンプル