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

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

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

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

設定

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

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

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

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

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

Lightbox with PhotoSwipeの設定

Lightbox with PhotoSwipeの設定

サンプルは下記ページで確認して下さい。

滋賀県高島市「マキノ高原のメタセコイア並木」の行き方と撮影スポット

2020.02.20

Excluded pages/posts

記事のIDを入力すれば、特定ページで「Lightbox with PhotoSwipe」を無効化することができます。

例えば、この記事なら「33332」と入力します(複数ある場合は「,」で区切ります)。

Visible sharing options

シェアアイコンをクリックした際に表示されるリンクボタンを設定できます。

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の設定

Visible elementsの設定

Show picture counter 画面左上にカウンターを表示(画像の枚数)
Show fullscreen button 全画面表示ボタンを表示
Show zoom button if available ズームボタンを表示

Captions

キャプション領域に表示させるテキストを設定することができます。

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データが削除されているかもしれません。

WordPressの画像「代替テキスト・タイトル・キャプション・説明」の設定

2017.12.15

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

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