モーダルウィンドウって実装するのはそこまで難しくないけど、いざ作るとなると面倒くさい…できることなら短いコードでビュン！と実装したい。
そんなぼくの悩みをスパッと解決してくれたのがJavaScriptライブラリの「fancybox」さん！
出会いは先日取り組んだあるWeb制作案件でした。デザイナー（クライアント）の方からモーダルはこれ使って下さい、的な感じで添付されてきたのがfancyboxの公式サイト。
初めて見るライブラリでしたが、公式サイトの可愛らしいデザインとアニメーションの動作の軽やかさ、なにより実装の手軽さに感動しました。
実際使ってみると、これがまー簡単簡単。楽ちんof楽ちんでした。レスポンシブにも対応してくれてるので実案件ですぐに導入できる素晴らしいライブラリです。
用途はたくさんあると思いますが、Web制作で使用する機会が多いのはこの2つでしょう。
「画像をクリックしたら、モーダルでふわっと画像が表示される」
「画像をクリックしたら、モーダルが開いて、YouTube動画が再生される」
どちらも簡単に実装できますよい。それでは以下で使用方法を軽く紹介します。
※jQueryを導入していることを前提として話を進めます。
fancyboxでモーダルをサクッと実装！
まずは定番のfancyboxを読み込むところから。
①head内で以下を読み込みましょう。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />②body閉じタグ直前らへんで以下を読み込みましょう。
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>ここまででfancyboxを使う準備は完了です。それでは最後に実際にモーダルを出現させる方法を見ていきましょう。
ここで大事なのは、「data-fancybox」と「href」の2つです。
③クリック対象のaタグなどのタグにdata-fancyboxを付与しましょう。
④そうしましたら、href属性の値にモーダルが開いた時に表示させたい画像のパス、もしくはYouTube動画のURLを設定しましょう。
上記2点を設定したサンプルコードは以下です。
<a href="モーダルの画像.jpg" data-fancybox>
<img src="thumbnail.jpg" alt="" />
</a>
<a href="https://www.youtube.com/watch?v=r-4XumkB2Yg" data-fancybox>
<img src="thumbnail.jpg" alt="" />
</a>2つ目のaタグがYouTube動画表示のサンプルです。
以上、fancyboxで作るモーダルウィンドウの紹介でした。
めちゃくちゃ簡単でしたよね？
実際の動きなどを見るとより使いたくなると思うので公式サイトへGoしてみてください〜
次はこの記事！
スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方 
Swiper.jsカスタマイズに役立つ記事まとめ 
Twitterのハートボタンのアニメーションを再現する方法【fontawesomeアイコンでの実装も収録】