プラグイン「Lightbox with PhotoSwipe」を追加すると、画像にPhotoSwipe機能を実装できます。
分かりやすく言うと、サムネをクリックしたら同一ページ内でフルサイズの大きな画像が表示されるLightbox系のプラグインです。ギャラリーを作成して大きな画像を掲載したい方におすすめです。
Contents
設定
Lightbox with PhotoSwipeを追加＆有効化します。
特に難しい設定はありません。画像を挿入する際、リンク先「メディアファイル」を選択するだけで機能します。また、挿入時にショートコードやクラス属性を追加する訳ではないので、メディアファイルにリンクされた画像全てに適用されます（ページを指定して無効にすることも可能）。
リンク先「メディアファイル」を選択
ダッシュボードの設定「Lightbox with PhotoSwipe」から、各種設定の変更も可能です。
Lightbox with PhotoSwipeの設定
サンプルは下記ページで確認して下さい。
Excluded pages/posts
記事のIDを入力すれば、特定ページで「Lightbox with PhotoSwipe」を無効化することができます。
例えば、この記事なら「33332」と入力します（複数ある場合は「,」で区切ります）。
Visible sharing options
シェアアイコンをクリックした際に表示されるリンクボタンを設定できます。
Visible sharing optionsの設定
| Share on Facebook | Facebookのシェアボタン |
|---|---|
| Tweet | Twitterのシェアボタン |
| Use URL of images instead of lightbox on Facebook and Twitter | シェアリンクのURLを記事URLから画像URLに変更 |
| Pin it | Pinterestのシェアボタン |
| Download image | 画像のダウンロードボタン |
Visible elements
可視要素の設定を変更することができます。
Visible elementsの設定
| Show picture counter | 画面左上にカウンターを表示（画像の枚数） |
|---|---|
| Show fullscreen button | 全画面表示ボタンを表示 |
| Show zoom button if available | ズームボタンを表示 |
Captions
キャプション領域に表示させるテキストを設定することができます。
Captionsの設定
| Show caption if available | キャプションを表示 |
|---|---|
| Get the image captions from the database (this may cause delays on slower servers) | データベースから画像キャプションを取得（遅延するかも） |
| Use alternative text of images as captions if needed | キャプションとして画像の代替テキストを使用 |
| Show EXIF data if available | EXIFデータを表示 |
EXIFデータにチェックを入れると、「ボディ」「焦点距離」「F値」「ISO感度」が表示されますが、画像圧縮系のプラグインを使用している方はEXIFデータが削除されているかもしれません。
Other options
Lightboxの各種操作を設定することができます。
| Show WordPress galleries and Gutenberg gallery blocks in separate lightboxes | WordPressギャラリーとグーテンベルクギャラリーブロックを別々のライトボックスに表示 |
|---|---|
| Close when scrolling in desktop view | デスクトップビューでスクロールするときに閉じる |
| Close with vertical drag in mobile view | モバイルビューで垂直ドラッグで閉じる |
| Close the lightbox by clicking outside the image | 画像の外側をクリックしてライトボックスを閉じる |
| Update browser history (going back in the browser will first close the lightbox) | ブラウザーの履歴を更新する（ブラウザーに戻ると最初にライトボックスが閉じる） |
| Allow infinite loop | 無限ループを許可する |
| Enable pinch to close gesture on mobile devices | ピンチインでモバイルデバイスのライトボックスを閉じる |
| Enable tap to toggle controls on mobile devices | タップでモバイルデバイスのコントロールを切り替える |
| Full picture size in desktop view | デスクトップビューをフル画像サイズで表示 |
| Use slide animation when using arrows in desktop view | デスクトップビューで矢印を使用するときにスライドアニメーションを使用 |
Spacing between pictures
写真間の間隔を設定することができます。
ただ、僕が使っているGoogle ChromeとAndroid端末では違いがよく分かりませんでした。
Skin
スキンを選択することができます。
4種類ありますが、「New share symbol」は共有ボタンが変更されているだけです。また、「with solid background」は上下のスペースが非透過の黒帯で表示されます。
最後に
Lightbox系のプラグインはEasy FancyBoxが有名ですが、ギャラリーを作成して大きな写真を表示させたい時は、「Lightbox with PhotoSwipe」の方が使い勝手がよく優秀です。
ただ、画像が大きくなれば、その分ファイルサイズも大きくなってしまうので注意が必要です。
ちなみに、Lightbox系のプラグインはたくさんありますし、基本はメディアファイルにリンクを貼るだけで機能するので、自分のサイトに合わなければプラグインを変更して下さい。
最近のコメント