• Responsive Lightbox プラグイン 画像にLightbox 効果

    概要

    画像や動画をレスポンシブに対応してポップアップ表示します。7種類の表示タイプから選択し、タイプ別表示の詳細設定が可能です。ギャラリー表示機能も有ります。専用のウィジェットも追加します。

    Lightbox 系の無料のWordPress公式プラグインです。

    記事の内容は Responsive Lightbox 1.7.2 バージョンの内容です。公開している日本語化ファイルは 最新の 2.1.0 です。

    余談ですが、大幅な機能アップの2.0にしてから数日で4つもバージョンアップしてます。動作も少し変ですので 1.7 以前のバージョンの方はしばらくアップデートは控えた方が良いかと思われます。

     

    詳細

    7種類の 表示タイプでお好みのポップアップ表示を可能にします。

    1.SwipeBox

    • 背景は真っ黒です。
    • 終了するには画面の右上隅の「x」をクリックします。
    • ナビゲーション矢印は画面の下に表示されます。

    SwipeBox

    2.prettyPhoto

    • 背景を少し暗くします。
    • ボーダーが画像周囲に付いています。
    • 終了するには画像の右下の 「x」をクリックします。
    • ギャラリー機能が有ります。画像内下部に横一覧で表示します。

    prettyPhoto

    3.FancyBox

    • 背景を明るく表示します。
    • 終了するには画像の右上の「x」をクリックします。
    • ナビゲーション矢印は画像の左右にマウスオーバーすると表示されます。

    FancyBox

    4.Nivo Lightbox

    • 背景は少し暗くなります。
    • 終了の表示は無く、画像の周りの灰色の枠をクリックして終了します。
    • ナビゲーション矢印は画面の左右中央に表示されます。

    Nivo Lightbox







    5.Image Lightbox

    • ボーダーも無く、背景もそのまま残します。
    • ナビゲーション矢印も無いですが、画像の右をクリックすると次の画像へ、左をクリックすると前の画像へ移動します。
    • 終了するには背景をクリックします。

    Image Lightbox

    6.TosRUs

    • 背景は暗くなります。
    • ボーダーは付きません。
    • 終了するには画面の右上の「x」をクリックします。
    • ナビゲーション矢印は画面の左右中央に表示されます。
    • ギャラリー機能が有ります。画面の下中央に一覧表示します。

    TosRUs

    7.Featherlight

    • 背景は暗くなります。
    • 終了するには画像の右上の 「x」をクリックします。
    • ナビゲーション矢印は画像の左右中央に表示されます。

    Featherlight

    インストール

    WordPress公式プラグインなので他のプラグインと同じ方法です。

    日本語化

    デフォルトで9割以上は日本語化されています。しかし個人的には相性があまり良くないです。

    そこで英語の翻訳では無く、動作確認した内容の日本語化ファイルを作りました。もったいないので個人用ですが一般公開します。9割近くは元の翻訳です。が、「※」が付いた英文には無い追加説明も多数存在します。

    個人的な翻訳の例を見ると、「変更前」 -> 「変更後」

    • 「デフォルト Lightbox」->「使用するLightboxタイプ」
    • 「最後から繰り返す」->「最初から繰り返す」
    • 「トランジション (イン/アウト)」->「遷移 (イン/アウト)」
    • 「無限ループ」->「最初に戻る」
    • 「キーボードナビゲーション」->「キーボードで操作」

    ダウンロード  Responsive Lightbox & Gallery 2.1.0 プラグイン 日本語化ファイル  (52.1 KB, 作成 2019年1月17日)

    上記をダウンロードしたら。以下のファイルを

    • responsive-lightbox-ja.po
    • responsive-lightbox-ja.mo

    以下のフォルダにアップロードしますが、既にファイルが存在する場合は上書きする前に別の箇所に上書きされるファイルをバックアップして下さい。

    • /wp-content/languages/plugins/