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

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

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

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

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

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

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

投稿内の画像へリンクを設定

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

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

フリー素材ぱくたそ(www.pakutaso.com)

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

フリー素材ぱくたそ(www.pakutaso.com)
フリー素材ぱくたそ(www.pakutaso.com)