この記事では、
という方に向けた記事です。
ライトボックス系のおすすめ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はかなり簡単に設置出来るのでおすすめです。
レスポンシブに対応していますし、グループ化も名前を当てるだけでかなり簡単ですね。
TechAcademyは最大手のオンラインプログラミングスクール。コースは24種類と豊富で幅広く学べるのが特徴。完全無料（０円）で１週間無料体験授業が受講可能。無料体験期間中にメンターのオンライン面談を受けるとAmazonギフト券５００円がもらえます。
» 公式サイトを見る
TECH CAMPは転職に特化したプログラミングスクール。転職成功率は９８%で、転職できなければ受講料全額返金の制度あり。無料カウンセリングで受講内容からエンジニア需要まで疑問が全て解決できます。
» 公式サイトを見る
TechBoostはBranding Engineerが運営するオンラインプログラミングスクール。フリーランス案件求人midworksも運営しているので、卒業後の進路が転職、フリーランスと選択肢が多いのが特徴です。無料説明会あり。
» 公式サイトを見る
