【JavaScript実践 #8】画像をポップアップ表示できるプラグイン「Fancybox v4」を解説！

今回は、画像をポップアップ表示できるプラグイン「Fancybox v4」を解説します。
複数ある画像を一覧で見せたいとき、Fancyboxがあると、ページ更新せずに画像を大きく見せることができるので、とても便利です。

YouTubeにもアップしていますので、見ていただけたら嬉しいです！

Fancybox v4とは？

Fancybox v4とは、画像やリンク先をポップアップ表示できるjQueryのプラグインです。
2022年6月現在では、v4が最新バージョンです。

詳しくは、公式から確認できます。
英語ですが、翻訳すれば大体分かるかと思います。

https://fancyapps.com/docs/ui/fancybox/

Fancyboxの使い方

それでは、Fancyboxの使い方を解説します。
と言っても、Fancyboxはとても簡単です。

jsとcssファイルを読み込む

まずは、以下3つのファイルを読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

cdnから直接読み込んでも、ダウンロードして相対として読み込んでもどちらでも大丈夫です。

画像にaタグを追加する

ポップアップ表示させたい画像をaタグで囲んで、必要な属性を追加します。

<a data-fancybox data-src="img/img.jpg" data-caption="テキストテキスト">
    <img src="img/thumb.jpg" alt="">
</a>

保存してブラウザで確認してみましょう。
画像をクリックするとポップアップで表示されるかと思います。

解説

• data-fancybox：aタグに追加。
• data-src：ポップアップ表示させたい画像のパスを記述。
• data-caption：画像の下に表示させるテキストを記述。
• imgタグのsrc：サムネイル画像のパスを記述

これだけで、ポップアップ表示させることができます。

Googleマップをポップアップ表示させる

ポップアップできるのは画像だけではありません。
Googleマップもポップアップ表示させることができます。

<a data-fancybox data-type="iframe" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828265957385!2d139.77234536581398!3d35.681230380194435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601889579666f253%3A0x1e95a5c140ebbb6b!2z44CSMTAzLTAwMjcg5p2x5Lqs6YO95Lit5aSu5Yy65pel5pys5qmL!5e0!3m2!1sja!2sjp!4v1654502146084!5m2!1sja!2sjp" href="javascript:;">
  Googleマップ
</a>

Googleマップで、あらかじめ場所を決めて埋め込めば、どこでも好きな場所を設定することができます。

最後に

以上、画像をポップアップ表示できるプラグイン「Fancybox v4」を解説しました。

Web制作をしていると、ポップアップで表示させたいシーンが多くあり、いつもどのように実装しようか迷う場面が多いです。

そんな時は、Fancyboxが便利です。

他にもいろいろなオプションが用意されていたり、カルーセルと組み合わせたりもできるので、挑戦してみてください。