記事内の画像をクリックで拡大し、ページ内画像の一覧ナビへ

2021年2月7日

記事内に画像を数多く表示させる場合、そのページ内に含まれる画像だけを画像一覧にして、next/prevのナビゲーションにて順番に見れるようにする。プラグインのインストールから基本設定、投稿記事への適用まで

プラグインのインストール

この機能を実現するには、手っ取り早い方法としてプラグインを導入すること。見つけたプラグインは、様々なサイトで紹介されている『EasyFancyBox』プラグイン。

インストール後に設定を変更する必要はほぼないが　ページ内画像の一覧ナビを有効にするために、自動ギャラリーの設定を『オールインワンギャラリー』へ変更する。下記項目へチェックを入れる。

また、これだけの設定では、一覧ナビの動きが一方向ナビのみ（①→②→③　または　③→②→①）となるが、下記のチェックを入れることで　ローテーションナビ（①→②→③→①　または　③→②→①→③）となる。

これらの設定を完了後、ページ下部の『保存』で設定パラメータを保存する。

記事の投稿画面にて、画像ブロック内に画像を貼り付け後、リンクを編集にて　『メディアファイル』を選択。

この画像リンクを設定することで、クリックすると大きな画像表示となる。下の鳥居の画像をクリックして見てください。

さらに下の２つの画像にも同様の画像リンクを加えることで、クリックで画像が大きくなると同時に３つの画像がナビ（矢印）により切り替え可能となる。