画像やYouTube動画などをポップアップで表示する「Shadowbox JS」

「WP-lightpop」を使っていましたが、テンプレートのバージョンアップをしたら動かなくなってしまったので、新たに「Shadowbox JS」を使うことにしました。
画像や動画をポップアップで表示させたいけど「WP-lightpop」が動かないという方は、ぜひ試してみてください。
Shadowbox JSの導入手順
管理画面の「プラグイン」⇒「新規追加」をクリックして「Shadowbox JS」を検索します。
「Shadowbox JS」が見つかると思うので、「今すぐインストール」をクリックして「有効化」します。
有効化すると上部にエラーが表示されるので、「Shadowbox JS Settings page」をクリックします。
設定ページの「Get Shadowbox Source Files」をクリックするとエラーが表示されなくなります。
次に「Shadowbox JS」を日本語化します。下記のサイトで日本語化ファイルを配布されていますので、日本語化ファイルをダウンロードしてください。
ダウンロードした圧縮ファイルを解凍すると「shadowbox-js-ja.po」と「shadowbox-js-ja.mo」の2つのファイルがあります。
FTPソフトなどで「wp-content」⇒「plugins」⇒「shadowbox-js」⇒「localization」の中に「shadowbox-js-ja.mo」をアップロードしてください。
アップロード後に設定画面に行くと日本語になっていると思います。
「Shadowbox JS」の設定手順
Shadowbox JSの設定画面で、まず最初に「FLVサポート」を「有効」にします。
すると「FLVサポートを商用目的で使用しないことに同意しますか?」とメッセージが表示されるので「OK」を選択します。※商用目的で使用する場合は、ライセンスを購入する必要があるみたいです。
- 「使用する Javascript ライブラリ」⇒「jQuery」(環境に合わせて選んでください)
- 「プレイヤー」⇒「FLV」にチェックを入れる。
- 「スマートローディング」⇒「有効」
- 「FLV ファイルへのリンク」⇒「有効」
次に動作の設定をします。私が設定で変更したのは以下の通りです。
最後に下のほうにある「設定を保存」をクリックします。これで画像やYouTubeの動画をポップアップで表示できるようになります。
YouTubeの動画をポップアップで表示させる場合
アンカーテキストの場合は下のようになります。△に表示させたい幅と高さを記入。○に動画の部分には「www.youtube.com/watch?v=○○○」の○の部分を記入します。
<a rel="shadowbox;width=△;height=△" href="http://www.youtube.com/v/○">タイトル</a>
サムネイル画像を使う場合は「i.ytimg.com」からサムネイル画像を取得できます。
○○○の部分には動画のIDを入れます。
<img src="http://i.ytimg.com/vi/○○○/0.jpg" />
0.jpgは320×240、その他のjpgは120×90のサイズでサムネイルを取得してくれます。
http://i.ytimg.com/vi/○○○/default.jpg
http://i.ytimg.com/vi/○○○/0.jpg
http://i.ytimg.com/vi/○○○/1.jpg
http://i.ytimg.com/vi/○○○/2.jpg
http://i.ytimg.com/vi/○○○/3.jpg
