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

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

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

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

設定

Lightbox with PhotoSwipeを追加&有効化します。

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

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

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

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

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

伏見稲荷大社(千本鳥居)

京都府京都市伏見区「伏見稲荷大社(千本鳥居)」の行き方と撮影スポット

2020.03.20

General

General

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

Theme

Theme

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

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

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

Captions

Captions

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

Sharing

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

Desktop

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

Mobile

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 タップを有効にしてモバイルデバイスのコントロールを切り替える

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

最後に

Lightbox系のプラグインはEasy FancyBoxが有名ですが、ギャラリーを作成して大きな写真を表示させたい時は、「Lightbox with PhotoSwipe」の方が使い勝手がよく優秀です。

ただ、画像が大きくなれば、その分ファイルサイズも大きくなってしまうので注意が必要です。

ちなみに、Lightbox系のプラグインはたくさんありますし、基本はメディアファイルにリンクを貼るだけで機能するので、自分のサイトに合わなければプラグインを変更して下さい。

ブログに掲載する写真の最適な大きさとサイズについて考えてみた

写真ブログに最適な画像の大きさとサイズについて考えてみた

2020.05.08
スポンサーリンク
スポンサーリンク