Lightbox with PhotoSwipeの設定と使い方：高機能な画像拡大表示

2020 2/26

2020年2月26日 2020年6月8日

Lightbox with PhotoSwipeの設定と使い方：高機能な画像拡大表示

プラグイン「Lightbox with PhotoSwipe」を追加すると、画像にPhotoSwipe機能を実装できます。

分かりやすく言うと、サムネをクリックしたら同一ページ内でフルサイズの大きな画像が表示されるLightbox系のプラグインです。ギャラリーを作成して大きな画像を掲載したい方におすすめです。

設定

特に難しい設定はありません。画像を挿入する際、リンク先「メディアファイル」を選択するだけで機能します。また、挿入時にショートコードやクラス属性を追加する訳ではないので、メディアファイルにリンクされた画像全てに適用されます（ページを指定して無効にすることも可能）。

リンク先「メディアファイル」を選択

ダッシュボードの設定「Lightbox with PhotoSwipe」から、各種設定の変更も可能です。

このサイトでも利用しているので、どんなことができるのかは下記ページを参考にして下さい。

General

Excluded pages/posts	ページID及び投稿IDを入力して無効化する
Excluded post types	投稿タイプを入力して無効化する
Show picture counter	画像カウンターを表示する
Show fullscreen button	全画面ボタンを表示する
Show zoom button if available	可能であればズームボタンを表示する
Update browser history (going back in the browser will first close the lightbox)	ブラウザーの履歴を更新（ブラウザーに戻ると最初にライトボックスが閉じる）
Allow infinite loop	無限ループを許可する
Show WordPress galleries and Gutenberg gallery blocks in separate lightboxes	WordPressギャラリーとGutenbergギャラリーブロックを別々のライトボックスに表示する
Add native lazy loading to images	画像にネイティブ遅延読み込みを追加する

Excluded pages/postsの「Show this setting as checkbox in page/post editor」にチェックを入れると、各ページ及び投稿編集画面でLightbox with PhotoSwipeのチェックボックスが表示されます。

設定は全て自由ですが、画像遅延読み込みの「Add native lazy loading to images」だけは注意して下さい。他の画像遅延プラグイン「Lazy Load」等を使用している場合は設定がバッティングして不具合を起こす可能性がありますし、スライダー等がうまく表示されなくなる可能性があります。

Theme

Skin	スキン（デザイン）の選択
Spacing between pictures	画面幅に対する画像間のスペース

Lightboxが表示された時のデザインを4つのスキンから選択できます。

画像間の間隔「Spacing between pictures」については、僕の環境では違いが分かりませんでした。

Captions

Show caption if available	可能な場合はキャプションを表示する
Get the image captions from the database (this may cause delays on slower servers)	データベースから画像のキャプションを取得する（遅いサーバーでは遅延が発生する可能性がある）
… also use description if available	可能な場合は説明も使用する
Use alternative text of images as captions if needed	画像の代替テキストをキャプションとして使用する
Show EXIF data if available	可能な場合はEXIFデータを表示する
Show date in EXIF data if available	可能な場合はEXIFデータに日付を表示する

画像の説明やEXIFデータを画像の下に表示させることができます。

撮影時のカメラの設定を載せたい時に使うと便利な機能なのですが、画像圧縮系のプラグインを使っている方は、EXIFデータが削除されている可能性があります。

Sharing

Share on Facebook	Facebookのシェアボタンを表示する
Tweet	Tweeterのつぶやきボタンを表示する
Use URL of images instead of lightbox on Facebook and Twitter	ライトボックスのURLの代わりに画像のURLを使用する
Pin it	PinterestのPinボタンを表示する
Download image	画像をダウンロードする
Copy image URL	画像のURLをコピーする
Custom link	カスタムリンクを使用する
Custom link, label	カスタムリンクで表示させたいラベル名
Custom link, URL	カスタムリンクのURL

お好みで表示させたい共有ボタンとリンク先のURLを変更することができます。

カスタムリンクを使用すれば、オリジナルのラベルとリンク先URLを追加することもできます。

Desktop

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	マウスホイールを操作した時の機能を選択する
Idle time for controls	シェアボタン等のコントロールが消えるまでの時間

デスクトップで表示させた時の設定を変更できます。全てお好みで設定して下さい。

Mobile

Close with vertical drag in mobile view	モバイルデバイスは垂直ドラッグで閉じる
Enable pinch to close gesture on mobile devices	ピンチを有効にしてモバイルデバイスでLightboxを閉じる
Enable tap to toggle controls on mobile devices	タップを有効にしてモバイルデバイスのコントロールを切り替える

スマホで表示させた時の設定を変更できます。全てお好みで設定して下さい。