この記事では、
[voice icon=”https://j-info1.com/wp-content/uploads/2017/12/pose_syourai_man.png” type=”l”]ライトボックス系の良い感じのjQueryプラグインないかな？[/voice]
という方に向けた記事です。
ライトボックス系のおすすめjQueryプラグインは、”fancyBox”です。簡単に設置、グループ化、レスポンシブ対応が出来ます。
それでは使い方を見てみましょう。
目次
fancyBoxの使い方は簡単【4ステップ】
ステップ1.
公式サイトからfancyBox３をダウンロードします。
ステップ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はかなり簡単に設置出来るのでおすすめです。
レスポンシブに対応していますし、グループ化も名前を当てるだけでかなり簡単ですね。