シンプルで軽量、スマホ対応の画像表示プラグイン「Simple Lightbox」が「EasyFancyBox」より良い。

Simple-Lightbox2

WordPressで画像をクリックするとライトボックスで表示してくれるプラグインは星の数ほどあるけれど、スマホで見たときにイマイチ見にくいのが多いです。

巷では「EasyFancyBox」というプラグインが大人気のようだけど、スマホでピンチアウトして拡大したいときになんだか不親切な感じがします。

パソコンでもスマートフォンでもシンプルだけど上手く表示してくれるライトボックスプラグイン「Simple Lightbox」を当サイトに導入しました。

スマホで画像を開いた時に、指で拡大ズームできるシンプルな画像表示プラグインです。

本当は「Lightbox with PhotoSwipe」を採用予定だったのですが、当サイト使用中の有料テーマAFFINGER5との相性が悪くうまく動かなかったので、妥協してこちらにしました。

Simple Lightboxの使い方

ココがおすすめ

■軽量かつシンプルで見やすいライトボックスを簡単導入
■スマホでズーム(ピンチアウトで拡大)できる
■PCでも画像をクリックすればフルサイズで画像を表示してくれる。

ライトボックス表示例【PC】

画像(左):ライトボックスプラグイン無し、新規ページで開くオプションあり。
画像(右):ライトボックスプラグインあり。

画像で比較しても分かりにくいですが、記事内の画像をクリックした時に、ページ内で全画面表示ができるようになります。シンプルでGOOD!

ライトボックス表示例【モバイル】

画像(左):ライトボックスプラグイン無し、新規ページで開くオプションあり。
画像(右):ライトボックスプラグインあり。

IOSで実際に画像をクリックした画面。こちらもページ遷移することなく画像を表示。
Simple-Lightbox5指でぎゅーっとピンチアウトするとこのまま拡大できます。

プラグインのインストール

2020年7月15日時点で公開されているプラグインなので、プラグイン>新規追加>「Simple Lightbox」と検索すれば出てきます。
今すぐインストールして有効化をクリック。

Simple Lightbox6

Simple Lightboxの設定

そのままでも有効化した時点でライトボックス表示はできるようになっていると思います。
※画像のリンク先をメディアファイルにしないと動作しません。

設定画面はWordpressのサイドメニュー、外観>LightBox またはインストール済みプラグイン>Simple Lightboxの下にある設定より。
Simple Lightbox7日本語なので読んで字の如くです。設定は簡単!基本的にデフォルトでOKかと。

【補足】
Lightbox機能を有効にする:プラグインのON,OFF。有効にしないと意味がありません...
ホームページで有効にする:サイトのトップページで有効にするか

Simple Lightbox8

【補足】
テーマ:画像の後ろの影の部分がライトとダークの2種類から選べます。
画像をシンプルに表示したいだけなので、今回はアニメーション、スライドショー、項目のループを無効にしました。

Simple Lightbox9

【補足】
ラベルの文字を変更できるようです。とはいってもこの文字がそのまま表示されるわけではなく、アイコンとして表示されるものばかりなのでそのままでOKでしょう。

以上でSimple Lightboxプラグインの導入、設定は終了です。最後に実装できたかPC、モバイルで確認しておきましょう・w・

わがままカスタマイズ

スマホで画像をライトボックス表示するときは、画面上部に画像が表示されるのが仕様のようです↓

Simple-Lightbox4

プラグインON

パソコンみたいに画面のど真ん中に表示したかったので、少しカスタムします。

子テーマのstyle.cssを編集して以下のコードを追加。

/*ライトボックスの画像表示をスマホで中央寄せ*/
@media only screen and (max-width: 480px) {
#slb_viewer_wrap .slb_theme_slb_default .slb_container {
transform: translateX(50vw) translateX(-50%);
transform: translateY(50vh) translateY(-50%);
}
}

このプラグインで追加されているであろうIDとClassに480px(スマホ)以下という条件付きで、cssにて上下左右のスペースを計算しなおして無理やり中央にもってきてます。Simple-Lightbox10
↑意図した結果になりました。

しかしなぜかISOの実機のsafariだけまだ画面上部に表示されちゃうままです…
後日確認したらちゃんと中央に表示されるようになりました。

サイトに合うように適宜カスタマイズして使用していただければと思います。

まとめ

動作も設定の細かさ的にも本当は「Lightbox with PhotoSwipe」を使いたかったのですが、有料テーマAFFINGER5ではスマホで画像をピンチアウトで拡大したときにズレちゃってうまくいきませんでした。

大人気プラグインの「EasyFancyBox」よりもシンプルかつスマホのピンチ対応ということでソロ学では当分このプラグインに頼りたいと思います。
横長の画像が多いのでスマホで見ると少しアレですが、それはどのプラグインでも同じです。
動作も安定しており、不満な点は特にないです。

-Wordpress
-,

© 2021 ソロ学