モーダルは、ユーザーに重要な操作や確認を促したりするときに用いられることが多く、JavaScriptで作られることが多いUIです。
モーダルの実装自体の難易度は難しくないですが、できることなら簡単に実装したい時に活躍するのが、jQueryライブラリFancyboxです。
モーダルだけでなく、カルーセルも簡単にできるので便利なライブラリです。
この記事では、そんなjQueryライブラリFancyboxの実装方法や、サンプルについて解説しています。
モーダルやカルーセルなど、汎用性が高い万能なプラグインを探している方は是非最後までご覧ください。
目次
Fancyboxとは？
Fancyboxは、モーダルを簡単に実装できるjQueryのライブラリです。
公式サイト fancypps
このライブラリを使うと、例えばですが
- ボタンクリックで画像がモーダル表示
- ボタンクリックでYouTube動画がモーダル表示
- ボタンクリックでGoogleマップがモーダル表示
など、リンクのaタグに絡めて、いろんなものをモーダルで表示させることができます。
記事執筆時点でver.4が最新のものになるので、使う時は最新のものにしましょう。
実装のサンプル
早速ですが、Fancyboxを使ったサンプルを4つご覧ください。どれもボタンをクリックすると、モーダルが表示されます。
画像のモーダル
mp4動画のモーダル
YouTube動画のモーダル
Googleマップのモーダル
ざっくりとした実装の手順
まずはじめにjQueryの組み込みが必要です。
jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><head>〜</head>jQueryは必須でないと動かないので、次のステップへ進みましょう。
次に、<head>〜</head>内にあるjQuery本体の後以降に、fancybox本体のjsとCSSのコードを記述して、ライブラリを使います。
ライブラリは、全てCDNで提供されているので以下のコードをコピペすればOKです。
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />ちなみに、モバイルのレンダリング(描画)を優先させる為、jsのファイルは<body>〜</body> のクロージングタグ直前に記述した方がいいです。
これで準備は完了です。
利用したいモーダルのコードをそれぞれ表示させたい位置にコピペします。
それぞれのコードについては、この後に記載していますのでそちらを参考にしてみてください。
コピペ用のHTMLコード各種
よく使う5種類のコピペ用コードをそれぞれ記載しています。好みのものを利用ください。
画像のモーダル
一番よく使う、画像のモーダルです。モーダルで表示した画像下のテキストも任意で書き換え可能です。
その場合はdata-caption="Optional caption" の部分を書き換えればOKです。
コードを表示する
<a
href="https://lipsum.app/id/1/1024x768"
data-fancybox="gallery"
data-caption="Optional caption"
> 画像のモーダル</a>mp4動画のモーダル
mp4動画のモーダルです。表示されたモーダルを「閉じる」と、動画の再生もそれに合わせて停止してくれます。
コードを表示する
<a href="http://media.w3.org/2010/05/sintel/trailer.mp4" data-fancybox > mp4動画</a>YouTube動画のモーダル
これもよく使うYouTube動画のモーダルです。
YouTubeで再生したい動画は、data-src="XXXXXXXXX" の中にYouTubeのURLを記載するだけでOKです。
コードを表示する
<a data-type="iframe" data-src="https://www.youtube.com/embed/9xWblTln6Hg" href="javascript:;" data-fancybox>Youtube動画</a>カルーセル・スライダー
モーダルではありませんが、カルーセル・スライダーもこのライブラリで簡単に実装できてしまいます。
その場合、HTMLとJavaScriptのコードをセットで記述する必要があるので忘れず記述するようにしましょう。
コードを表示する
<div id="myCarousel" class="carousel">
<div class="carousel__slide">1</div>
<div class="carousel__slide">2</div>
<div class="carousel__slide">3</div>
</div>const myCarousel = new Carousel(document.querySelector("#myCarousel"), {
// Your options go here
});Googleマップ
Googleマップも、モーダルで埋め込みが可能です。
コードを表示する
<a
href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv"
data-fancybox
data-type="iframe"
data-preload="false"
data-width="640"
data-height="480"
>
Googleマップのモーダル</a>
