はじめに

第3回も前回に引き続き，Lightbox風プラグイン（Shadowbox.js，ThickBox）を紹介していきます。

Shadowbox.jsは画像だけでなくFlashやムービーにも対応した，非常に多機能なライブラリとなっており，ThickBoxもHTMLコンテンツなどを表示できる自由度を持っています。

Shadowbox.js

Shadowbox.jsは，画像はもちろんのことFlashやムービー，HTMLコンテンツなどにも対応した，非常に多機能なライブラリです。多くのオプションも用意されており，高いカスタマイズ性を実現しています。

ただ純粋なjQueryプラグインというわけではなく，Prototype，YUIなど複数の有名どころのライブラリにも対応しており，それぞれにアダプタを用意する形をとっています。

ダウンロード

まずは配布サイトからShadowbox.js一式をダウンロードしましょう。ダウンロードページで必要なものを選択する形でダウンロードできますが，今回は「DownloadFull」ボタンから，ソース一式をダウンロードします。

展開するとサンプルなど提供されるすべてを確認することができますが，今回，実際に利用するものはsrcフォルダ内のものとなります。

js/lang/player/skinフォルダの作成

次にShadowbox.jsを利用するために，必要なJavascript/CSS/画像などをダウンロードしたファイル群からコピーします。

1. HTML（index.html）が存在すフォルダにjsフォルダを作成し下記ダウンロードファイルをコピーします。また，当然ですがjQuery本体（jquery.js）もこのフォルダに用意します。

   src/shadowbox.js

   Shadowbox.js本体です。HTML内でscriptタグを使って読み込む必要があります。

   src/adapter/shadowbox-jquery.js

   Shadowbox.jsがjQueryと連動するためのアダプタです。こちらもHTML内でscriptタグを使って読み込む必要があります。

2. 同じ場所にsrcフォルダ下のskin，lang，playerの3つのフォルダをコピーします。

   skinフォルダ

   ローディング画像やCSSなど用意されており，後述するスキンの指定を変えることにより見た目を簡単に変更することができます。

   langフォルダ

   拡大表示領域内に表示される文字の言語に対応するJSファイルが用意されています。こちらも後述しますが，英語なら「loading」などの文字，他の言語を指定することにより中国語やフランス語に切り替えることが出来ます（残念ながら現在日本語はありません）。

   playerフォルダ

   静止画やFlashなど拡大表示領域内に読み込むメディアタイプごとにJSファイルが用意されています。下記のように様々なメディアタイプに対応しています。

初期設定

ファイルが用意できたところでHTMLに初期設定のJavascriptを記述していきます。読み込むJSファイルはjsフォルダ下のjquery.js，shadowbox-jquery.js，shadowbox.jsとなります。

<!-- jQuery本体 -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- jQueryアダプタ -->
<script type="text/javascript" src="js/shadowbox-jquery.js"></script>
<!-- プラグイン自身 -->
<script type="text/javascript" src="js/shadowbox.js"></script>

<script type="text/javascript">

  <!-- スキンの指定 -->
  Shadowbox.loadSkin('classic', 'skin');
  <!-- 言語の指定 -->
  Shadowbox.loadLanguage('en', 'lang');
  <!-- プレイヤーの指定 -->
  Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'player');
  
</script>

JSファイルの読み込みが終わったら，Shadowbox.loadSkin/Language/Playerメソッドでスキン，言語，プレーヤーの設定を行います。どのメソッドも第1引数は指定する値，第2引数で指定値が参照するファイルを持つフォルダを設定する形になっています（ここではskin，language，playerフォルダが該当します）。

スキンの指定

skinフォルダ内のスキンを指定します。スキンには画像やCSSファイルなどが含まれており，拡大表示領域の見た目の部分を担っています。今回はデフォルトで用意されているclassicを指定しています（skinフォルダ下のclassicフォルダを指定しています）。

言語の指定

拡大表示領域で使用される文字の言語の指定をします。langフォルダ内にshadowbox-XX.jsというJSファイルが幾つかあり，そのXXの部分を指定します。今回は英語（en）を指定しています（langフォルダ下のshadowbox-en.jsを指定しています）。

プレイヤーの指定

拡大表示領域で利用するプレーヤーの指定を行います。言語の指定と同様にplayerフォルダ内にshadowbox-XX.jsというJSファイルが幾つかあります，そのXXの部分を指定します。プレーヤーは複数指定でき，今回は使えるプレーヤー全てを指定しています。