fancyBoxの使い方を徹底解説【jQueryプラグイン】

fancyBoxの使い方を徹底解説【jQueryプラグイン】

この記事では、

[voice icon=”https://j-info1.com/wp-content/uploads/2017/12/pose_syourai_man.png” type=”l”]ライトボックス系の良い感じのjQueryプラグインないかな?[/voice]

という方に向けた記事です。

ライトボックス系のおすすめjQueryプラグインは、”fancyBox”です。簡単に設置、グループ化、レスポンシブ対応が出来ます。

それでは使い方を見てみましょう。

fancyBoxの使い方は簡単【4ステップ】

ステップ1. 

公式サイトからfancyBox3をダウンロードします。

ステップ2. 必要最低限のファイルを設置

ダウンロードしたzipファイルを解答したら、dist内の必要最低限のファイルを設置します。

  • jquery.fancybox.min.js
  • jquery.fanvybox.min.css

ちなみにminファイルは圧縮されたjsやcssなので、特にカスタマイズする必要がない場合は、minファイルを使うことをおすすめします。
ちなみにjQuery本体も設置しておかないと動かないです。

ステップ3. script設置

min、cssが設置できたらscriptに下記の記述が必要です。

この部分で「複数画像表示時に最初と最後をループさせるかどうか」、「画面端に矢印のナビゲーションを表示するかどうか」など設定できます。詳しくは公式サイトを読みましょう。

ステップ4. 表示させたい画像を設置する

ステップ1〜ステップ3までで準備はOK。

ここから実際に表示させたい画像を設置していきます。

上記の通りです。

data-fancyboxを統一することでグループ化も簡単に出来ます。

まとめ:fancyBoxは簡単に設置出来る

以上ですが、fancyBoxはかなり簡単に設置出来るのでおすすめです。

レスポンシブに対応していますし、グループ化も名前を当てるだけでかなり簡単ですね。