はじめに
第3回も前回に引き続き,
Shadowbox.
Shadowbox. js
Shadowbox.
ただ純粋なjQueryプラグインというわけではなく,
ダウンロード
まずは配布サイトからShadowbox.
展開するとサンプルなど提供されるすべてを確認することができますが,
js/ lang/ player/ skinフォルダの作成
次にShadowbox.
HTML
(index. html) が存在すフォルダにjsフォルダを作成し下記ダウンロードファイルをコピーします。また, 当然ですがjQuery本体 (jquery. js) もこのフォルダに用意します。 - src/
shadowbox. js - Shadowbox.
js本体です。HTML内でscriptタグを使って読み込む必要があります。 - src/
adapter/ shadowbox-jquery. js - Shadowbox.
jsがjQueryと連動するためのアダプタです。こちらもHTML内でscriptタグを使って読み込む必要があります。
- src/
同じ場所にsrcフォルダ下のskin,
lang, playerの3つのフォルダをコピーします。 - skinフォルダ
- ローディング画像やCSSなど用意されており,
後述するスキンの指定を変えることにより見た目を簡単に変更することができます。 - langフォルダ
- 拡大表示領域内に表示される文字の言語に対応するJSファイルが用意されています。こちらも後述しますが,
英語なら 「loading」 などの文字, 他の言語を指定することにより中国語やフランス語に切り替えることが出来ます (残念ながら現在日本語はありません)。 - playerフォルダ
- 静止画やFlashなど拡大表示領域内に読み込むメディアタイプごとにJSファイルが用意されています。下記のように様々なメディアタイプに対応しています。
JSファイル | 対応メディア |
---|---|
shadowbox-img. | 画像 |
shadowbox-swf. | Flash |
shadowbox-flv. | Flash Video |
shadowbox-qt. | QuickTime |
shadowbox-wmp. | Windows Media Player |
shadowbox-iframe. | IFRAMEでコンテンツを表示 |
shadowbox-html. | HTMLコンテンツ |
初期設定
ファイルが用意できたところでHTMLに初期設定のJavascriptを記述していきます。読み込むJSファイルはjsフォルダ下のjquery.
初期設定コード
<!-- 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ファイルの読み込みが終わったら,
- スキンの指定
- skinフォルダ内のスキンを指定します。スキンには画像やCSSファイルなどが含まれており,
拡大表示領域の見た目の部分を担っています。今回はデフォルトで用意されているclassicを指定しています (skinフォルダ下のclassicフォルダを指定しています)。 - 言語の指定
- 拡大表示領域で使用される文字の言語の指定をします。langフォルダ内にshadowbox-XX.
jsというJSファイルが幾つかあり, そのXXの部分を指定します。今回は英語 (en) を指定しています (langフォルダ下のshadowbox-en. jsを指定しています)。 - プレイヤーの指定
- 拡大表示領域で利用するプレーヤーの指定を行います。言語の指定と同様にplayerフォルダ内にshadowbox-XX.
jsというJSファイルが幾つかあります, そのXXの部分を指定します。プレーヤーは複数指定でき, 今回は使えるプレーヤー全てを指定しています。