ギャラリー画像の拡大表示プラグイン

画像などたくさん載せているギャラリーを使用する場合など画像クリックすることで拡大表示させたいですよね。

拡大表示中は矢印ボタンで次の画像に移っていくことを想像すると思います。

それを簡単にできるプラグインを紹介したいと思います。

拡大表示プラグインと聞いてもパッとしないかもしれません。

そんな方は以下の画像をクリックしてください。

Easy FancyBox

今回紹介するプラグインは「Easy FancyBox」です。

wordpressのプラグイン画面から検索したら表示されるので、インストールと有効化をしてください。

インストールすれば特に設定の必要なく使用ができるようになります。

(ブロックエディタの場合)

ギャラリーを押します。

メディアライブラリを押します。

表示させたい画像を選びましょう。

選んだら右下のギャラリーを作成を押します。

キャプションなど表示させたい場合は入力し、ギャラリーを挿入を押します。

エディター画面右側から「カラム数」「リンク先」「画像サイズ」を選ぶことができます。

リンク先は「メディアファイル」を選択しましょう。

※「メディアファイル」でない場合は機能しません。

これで、拡大表示可能になりました。

プレビューなどで確認してみましょう。

(旧エディタの場合)

メディアを追加を押します。

左側からギャラリーを作成を選びましょう。

画像を選択し、ギャラリーを作成を押します。

右側から設定を行います。

リンク先はメディアファイルにします。

カラム数、画像の大きさを選択したらギャラリーを挿入を押します。

これでプレビューなどで機能するか確認してみましょう。

各種設定

「管理画面」⇒「設定」⇒「メディア」から設定を行うことができます。

「メディア」・・・

FancyBoxを有効化するファイルタイプなどの種類を選択できます。

「オーバーレイ」・・・

画像が拡大された際の画像以外の部分です。デフォルトでは黒を透かしたような色になっています。

オーバーレイをクリックしたら閉じる設定はあった方がいいでしょう。

「ウィンドウ」・・・

画像が拡大表示された際の挙動を詳しく設定できます。

「その他」・・・

自動ポップアップなど選択できます。比較的専門的な内容になりますので、わからない人は触らないようにしましょう。

「画像」・・・

画像に関する設定ができます。

拡大表示される際にの動きなど設定できます。トランジションイン、トランジションアウトの設定を変更してプレビューで確認してみましょう。

設定を変更した場合は「変更を保存」を忘れずに押しておきましょう。

さいごに

今回紹介したものはwordpressのプラグインでしたが、fancyboxはjqueryライブラリです。

プラグインを使用せず、ライブラリを使用して同様のものを作成していきたい場合や自由度を持たせたい場合はライブラリを使用しましょう。

「fancybox公式」からダウンロードできます。

個人利用は「GPLv3 license」です。

商用利用にはライセンスの購入が必要です。