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

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

「WP-lightpop」を使っていましたが、テンプレートのバージョンアップをしたら動かなくなってしまったので、新たに「Shadowbox JS」を使うことにしました。

画像や動画をポップアップで表示させたいけど「WP-lightpop」が動かないという方は、ぜひ試してみてください。

Shadowbox JSの導入手順

    管理画面の「プラグイン」⇒「新規追加」をクリックして「Shadowbox JS」を検索します。

    Shadowbox JS手順

    「Shadowbox JS」が見つかると思うので、「今すぐインストール」をクリックして「有効化」します。

    Shadowbox JS手順

    有効化すると上部にエラーが表示されるので、「Shadowbox JS Settings page」をクリックします。

    Shadowbox JS手順

    設定ページの「Get Shadowbox Source Files」をクリックするとエラーが表示されなくなります。

    Shadowbox JS手順

    ダウンロードした圧縮ファイルを解凍すると「shadowbox-js-ja.po」と「shadowbox-js-ja.mo」の2つのファイルがあります。

    Shadowbox JS手順

    FTPソフトなどで「wp-content」⇒「plugins」⇒「shadowbox-js」⇒「localization」の中に「shadowbox-js-ja.mo」をアップロードしてください。

    Shadowbox JS手順

    アップロード後に設定画面に行くと日本語になっていると思います。

「Shadowbox JS」の設定手順

    Shadowbox JSの設定画面で、まず最初に「FLVサポート」を「有効」にします。

    Shadowbox JS手順

    すると「FLVサポートを商用目的で使用しないことに同意しますか?」とメッセージが表示されるので「OK」を選択します。※商用目的で使用する場合は、ライセンスを購入する必要があるみたいです。

    Shadowbox JS手順

    次に動作の設定をします。私が設定で変更したのは以下の通りです。

    • 「使用する 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

    サムネイル画像から動画をポップアップさせる場合は下のようになります。

関連記事

コメントは利用できません。

ページ上部へ戻る