スマホでのピンチアウトにも対応するLightBox系プラグイン「Lightbox with PhotoSwipe」が良い!設定も解説。

2020-07-15
Wordpress

Lightbox-with-PhotoSwipeの使い方eyecatch
スマートフォンが普及して一気にモバイルファーストの時代となりました。

パソコン表示はもちろん、タブレットやスマートフォンでもバッチリと画像表示する必要があります。
そこでWordpressに導入できるライトボックス系の画像表示プラグイン「Lightbox with PhotoSwipe」をおススメします!

ココがおすすめ

  • PCはもちろん、タブレット、モバイルも完全対応。
  • スマホの画像拡大機能(ピンチアウト)に対応。
  • 埋め込んだ画像をページ内で表示できる(Light box)。
  • 画像を連続でスワイプ表示(PCでは←→キー)が可能。
  • 代表的なSNSへのシェア機能搭載。必要なければ隠すことも可能。
ただ一つ問題点があり、使用しているテーマやプラグインと干渉し、うまく動かないことも...ライトボックス系プラグインあるあるですが…ここさえパスできればこれ一択なくらいの使いやすさです。

無料テーマCocoonではうまく動作しましたが、有料テーマAFFINGER5ではスマホの画像拡大時に画像が左にズレてしまってうまくいきませんでした。

Lightbox with PhotoSwipeの使い方と動作

Lightbox with PhotoSwipeの特徴は以下です。

  • ページ内の画像をクリックするとライトボックスで画像が表示される。
  • 開いた画像が十分に大きければマウスが虫眼鏡マークになる。
  • クリックした部分を拡大表示する。
  • 画像をライトボックスで開いてからスマホでのピンチアウト、ピンチインでの拡大縮小も可能!

おまけに画像以外の外枠をクリックしたり、マウスホイールすれば勝手に画像が閉じる完璧さです!

画像カウンターを表示したり、FacebookやTwitterなどのSNSへのシェアボタンも完備。一つ一つメニューに何を表示するかがプラグインの設定で選べるという凄さ。

これだけ完璧なライトボックスプラグインなのにインストール数は9000+...
やはり使用しているテーマやプラグインによって完全にマッチする環境は限られているようなのが非常に残念です。

ポイント

このプラグインを使いたい人は一度インストールしてみて問題なく動くか、まず初めに確認したほうが良さそうです。

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

2020年7月15日時点でWordpressのプラグインとして公開されているので、そのままダッシュボードからインストールできました。

Lightbox-with-PhotoSwipeの使い方1

管理画面左メニュー>プラグイン>新規追加

に進み、プラグインの検索窓に「Lightbox with PhotoSwipe」と入力します。

プラグインが出てきたら、今すぐインストールを押して有効化しましょう。

なおプラグインの公式ページは以下です。

外部リンク

Lightbox with PhotoSwipeの設定

インストールが完了し、有効化されているとサイドメニューの設定の中に「Lightbox with PhotoSwipe」という項目があるのでココで詳細設定していきます。

Lightbox with PhotoSwipeで設定できる項目は以下です。

  • General
  • Theme
  • Captions
  • Sharing
  • Desktop
  • Mobile
  • Info

かなり設定できる項目があるので順番に見ていきます!

日本語化もできるようですが、一度設定してしまえば以後は触らないので英語のまま設定します。

英語が苦手な方はブラウザの日本語化機能を使えばうまく訳してくれます。

General

ライトボックス表示時にどのような動作をさせるか、ボタンの表示、非表示の切り替えなどを設定する項目です。

Lightbox-with-PhotoSwipeの使い方2

Excluded pages/posts:このプラグインを使用しないページを指定する。

Excluded post types:このプラグインを使用しない投稿タイプを指定する。

Visible elements:ライトボックスメニューの設定

Show picture counter:画像表示時に上部に(1/30)というカウンターを表示する。30枚の内1枚目という感じ。

Show fullscreen button:Youtubeにあるような全画面表示ボタンをメニューに表示する。

Show zoom button if available:可能な場合は+ボタンのようなズームボタンを表示する。

Other options:その他のオプション

Update browser history (going back in the browser will first close the lightbox):ブラウザーの履歴を更新する。(チェックしたままでOK)

Allow infinite loop:無限ループを許可。(最後の画像→最初の画像という感じにループする)

Show WordPress galleries and Gutenberg gallery blocks in separate lightboxes:WordPressギャラリーとGutenbergギャラリーブロックを別々のライトボックスに表示する。(触らなくてOK)

Add native lazy loading to images:画像にネイティブ遅延読み込みを追加する。(別のプラグインに頼るのでOFF)

無限ループはOFFにしといたほうが無難?あとは好みで設定して下さい...

Theme

Lightbox-with-PhotoSwipeの使い方3

画像表示時のデザインや余白などを調整する設定項目です。
デフォルトでも十分見やすいので変更する必要はないです。

Captions

Lightbox-with-PhotoSwipeの使い方4

画像のキャプションや画像のEXIF情報を表示するかどうかの設定です。

EXIFは写真家でもない限りほとんど必要ない情報ですが、キャプションはサイトによっては表示した方がユーザービリティーが向上します。
サーバーに負荷がかかる可能性があるとのことですので、不要な方はチェックを外しておきましょう。

Sharing

Lightbox-with-PhotoSwipeの使い方5

画像を表示したライトボックスページにSNSへのシェアボタンや、画像のダウンロードボタンを表示するかどうかの設定です。

Visible sharing options:共有ボタンの表示の設定

Share on Facebook:Facebookでシェアするボタンを表示するかどうか。

Tweet:つぶやきボタンを表示するかどうか。

Use URL of images instead of lightbox on Facebook and Twitter:FacebookとTwitterでライトボックスの代わりに画像のURLを使用する?

Pin it:ピンタレストのピン止めボタンを追加するかどうか。

Download image:画像をダウンロードするボタンを表示するかどうか。

Copy image URL:画像のURLをコピーするボタンを表示するかどうか。

Custom link:カスタムリンク(すみません良く分かりません…)

スマホに対応していてかつ見やすい画像の表示だけがこのプラグインを導入した目的だったので、チェックは全て外しました。必要な方は設置したいボタンのみチェックを入れましょう。

Desktop

Lightbox-with-PhotoSwipeの使い方6

PCで画像を開いた時の動作を設定する項目です。

General:PCでのライトボックスの設定

Full picture size in desktop view:パソコンで画像をフルサイズで表示する。

Use slide animation when switching images in desktop view:パソコンで画像を切り替える時にスライドアニメーションを使用する。(結構自然な感じ)

Close the lightbox by clicking outside the image:画像の外側をクリックしてライトボックスを閉じる。

Mouse wheel function:マウスホイールした時どうするか

Scroll zoomed image otherwise do nothing:スクロールしても何もしない。

Scroll zoomed image or close lightbox if not zoomed:スクロールしたら画像を閉じる。

Zoom in/out:マウスホイールで画像をズーム/ズームアウトする。

Switch to next/previous picture:マウスホイールで次/前の画像に切り替え。

Idle time for controls

画像表示時のメニューが消えるまでの時間、デフォルトでは4秒で画面端にあるメニューが消え、画像のみが表示されます。

基本的に初期設定が一番使いやすく、見やすいのでそのままでOKでしょう。後は好みで触って下さい。

Mobile

Lightbox-with-PhotoSwipeの使い方7

スマートフォンで画像を開いた時の動作を設定する項目です。

General:モバイル(スマホ)でのライトボックスの設定

Close with vertical drag in mobile view:垂直ドラッグ(縦フリック)で画像を閉じる。

Enable pinch to close gesture on mobile devices:ピンチを有効にしてジェスチャーを閉じる。

Enable tap to toggle controls on mobile devices:タップを有効にして、モバイルのコントロールを切り替える。

タップを有効化すると意図しない挙動が起きそうなため、一番下のEnable tap to toggle controls on mobile devicesの項目のチェックは外しました。

2つ目のピンチを有効にする項目は非常に重要です。
(このためにこのプラグインにしたようなものなので!)

Lightbox with PhotoSwipe―Info

プラグインのバージョンや簡単な使い方など。設定する項目はありません。

こちらにも書いているとおり、画像のリンク先はメディアファイルに設定することをお忘れなく!

まとめ

WordPressの画像表示、拡大、シェア機能はこのプラグインに任せておけば問題なし?環境的に動作するのであれば是非とも入れておきたい超便利プラグインの「Lightbox with PhotoSwipe」のご紹介でした。

残念ながら当サイトが使用している有料テーマ「AFFINGER5」ではどうもうまく動かないので別のプラグインで同じようなものを実装しましたが、このプラグインの機能や使いやすさには到底かないませんでした…別ブログの無料テーマCocoonでは問題なく動作しているのでなんだか悔しいです(笑)

■当サイトでは動作の近い?↓のプラグインを導入しました。

-Wordpress
-

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学