画像をポップアップ表示できるFancyboxの使い方を解説します。
まずはデモページをご覧ください。
デモページを見る
最初に「jQuery」と「fancybox」をCDNで読み込みます。
jQueryとfancybox js
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
fancybox css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
「JS」は「</body>」の前に、CSSは「head」タグ内に入れましょう。
「jQuery」は、2023年6月の時点で「3.7.0」が最新バージョンです。
「jQuery」CDNのサイトは下記です。
https://releases.jquery.com/
アクセスすると、「uncompressed」と「minified」の2種類あります。
「uncompressed」は非圧縮で、「minified」は圧縮バージョンです。
圧縮は、ソースの改行を排除しているため軽量です。
そのため、圧縮バージョンを使用します。
「fancybox」の公式サイトはこちら
https://fancyapps.com/fancybox/
次にHTMLです。
HTML
<a href="img/001.jpg" data-fancybox="dog" data-type="image" data-caption="ポメラニアン"><img src="img/001.jpg" alt="ポメラニアン" /></a>
<a href="img/002.jpg" data-fancybox="dog" data-type="image" data-caption="トイプードル"><img src="img/002.jpg" alt="トイプードル" /></a>
<a href="img/003.jpg" data-fancybox="dog" data-type="image" data-caption="チワワ"><img src="img/003.jpg" alt="チワワ" /></a>
<a href="img/002.jpg" data-fancybox="dog" data-type="image" data-caption="トイプードル"><img src="img/002.jpg" alt="トイプードル" /></a>
<a href="img/003.jpg" data-fancybox="dog" data-type="image" data-caption="チワワ"><img src="img/003.jpg" alt="チワワ" /></a>
画像が複数ある場合は、「data-fancybox」に同じ値を入れます。
そうする事でグループ化できます。
「data-caption」は、ポップアップした際に表示されるテキストになります｡
これだけで「fancybox」は導入できます。
後はオプションを使って、お好みでカスタマイズする事もできます。
デモページでは、下記のオプションを設定しています。
オプション
<script>
$(document).ready(function() {
$('[data-fancybox]').fancybox({
loop : true, // 複数画像の際に最初と最後をループさせる
toolbar : false, // ツールバーの表示・非表示
smallBtn : true, // 小さいCloseボタンの表示
keyboard : true, // キーボード操作を有効にするか
arrows : true, // 矢印の表示
iframe : { // iframeの処理
preload : false //iframeのプリロード
}
});
});
</script>
$(document).ready(function() {
$('[data-fancybox]').fancybox({
loop : true, // 複数画像の際に最初と最後をループさせる
toolbar : false, // ツールバーの表示・非表示
smallBtn : true, // 小さいCloseボタンの表示
keyboard : true, // キーボード操作を有効にするか
arrows : true, // 矢印の表示
iframe : { // iframeの処理
preload : false //iframeのプリロード
}
});
});
</script>
設定内容はコメントに書いてありますので、必要に応じて変更してみてください。
「fancybox」は、スマホにも対応しているので画像のポップアップにはお勧めです。