KumaTechLab
/

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

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

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

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

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

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

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

Easy FancyBox

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

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

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

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

ギャラリーを押します。

fancy-box - 20201106085829

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

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

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

fancy-box - 20201106085857

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

fancy-box - 20201106085914

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

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

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

fancy-box - 20201106085939

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

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

(旧エディタの場合)

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

fancy-box - 20201106090120

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

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

fancy-box - 20201106090247

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

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

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

fancy-box - 20201106090316-1

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

各種設定

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

fancy-box - 20201106094718

メディア」・・・

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

オーバーレイ」・・・

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

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

ウィンドウ」・・・

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

その他」・・・

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

画像」・・・

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

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

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

さいごに

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

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

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

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

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

Category :
JavaScriptコードレシピ集

JavaScriptコードレシピ集

なにかやりたい場面に応じてコードを探せるのが便利! JavaScriptを少しずつ書けるようになりたい人やWordPressなど基本的には使わないけどたまに使う人向け!

WordPress開発入門

WordPress開発入門

WordPress開発者はそばに置いておきたい1冊! WordPressでやりたいことができた時に右往左往してしまう人は本書を熟読し、全体像を把握すべし。

ハンズオンJavaScript

ハンズオンJavaScript

javascriptについて体系的に学びたい際におすすめ! 基礎的な文法から実用てきな内容、Webでの働き、ストレージ、セキュリティなど網羅的に学ぶことができます。

Read next

2020 KumaTechLab.