プラグイン「Lightbox with PhotoSwipe」を追加すると、画像にPhotoSwipe機能を実装できます。
分かりやすく言うと、サムネをクリックしたら同一ページ内でフルサイズの大きな画像が表示されるLightbox系のプラグインです。ギャラリーを作成して大きな画像を掲載したい方におすすめです。
設定
Lightbox with PhotoSwipeを追加＆有効化します。
特に難しい設定はありません。画像を挿入する際、リンク先「メディアファイル」を選択するだけで機能します。また、挿入時にショートコードやクラス属性を追加する訳ではないので、メディアファイルにリンクされた画像全てに適用されます（ページを指定して無効にすることも可能）。
リンク先「メディアファイル」を選択
ダッシュボードの設定「Lightbox with PhotoSwipe」から、各種設定の変更も可能です。
このサイトでも利用しているので、どんなことができるのかは下記ページを参考にして下さい。
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
| Skin | スキン（デザイン）の選択 |
|---|---|
| Spacing between pictures | 画面幅に対する画像間のスペース |
Lightboxが表示された時のデザインを4つのスキンから選択できます。
画像間の間隔「Spacing between pictures」については、僕の環境では違いが分かりませんでした。
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
| 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
| 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
| 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系のプラグインはたくさんありますし、基本はメディアファイルにリンクを貼るだけで機能するので、自分のサイトに合わなければプラグインを変更して下さい。
コメント