モーダルウィンドウ fancybox の実装方法
最終更新日 - 公開日 2017.08.24
by
モーダルウィンドウ fancybox の実装方法を紹介します。
jQuery を使ったライトボックススクリプト（モーダルウィンドウ）の中でも、実装が簡単な fancybox3 の実装方法を紹介します。
fancybox とは？
fancybox とは、WEBサイト上に画像や動画といったメディアを表示させるための jQuery ライトボックススクリプトの一つです。
近年の Ver. アップで、モバイルでの操作が向上、実装がさらに簡単になった点が特徴です。
簡単セットアップ
fancybox の実装はとっても簡単。実装には CSS と JavaScript の2つのファイルと、1行の JavaScript を記述するだけ。
使用条件として、別途読み込む jQuery の Ver が v3.2.1 以上を推奨しています。
ファイルのダウンロード
まずは fancybox3 へアクセスして実行ファイルをダウンロードします。
ダウンロードしたファイル「fancybox-master」から「dist」ディレクトリの「CSS」と「JavaScript」ファイルにある、
「jquery.fancybox.css または jquery.fancybox.min.css」と「jquery.fancybox.js または jquery.fancybox.min.js」を使います。
1.CSS ファイルの読み込み
モーダルウィンドウを表示した時の見た目を整える CSS ファイルを読み込みます。
次のコードを <head> タグ内の任意の場所にコピーします。
<link rel="stylesheet" href="../css/jquery.fancybox.min.css"/>
ファイルのディレクトリ構成は任意の値に変更してください。
見た目のカスタマイズを行う場合は、圧縮した jquery.fancybox.min.css ファイルよりも編集しやすい jquery.fancybox.css を選択してください。
2.javascript ファイルの読み込み
モーダルウィンドウの動きを制御する JavaScript ファイルを読み込みます。
次のコードを <head> タグ内か </body> 直前にコピーします。
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox.min.js"></script>
すでに別の jquery ファイルを読み込んでいる場合は、jquery-3.2.1.min.js の追加は不要ですが、元々使用している jquery がある場合、jquery の Ver. によっては正しく動作しない場合があります、お気をつけください。
3.javascript を追加
モーダルウィンドウで画像を表示したい場合は、任意の a タグ内に data-fancybox を追加します。
例えば、画像のボタンをクリックした時に、モーダルウィンドウで画像を表示する場合は、次のように追加します。
<a href="[モーダルで表示したい画像ファイル]" data-fancybox data-caption="sample1">
<img src="[ボタン画像]" alt="" />
</a>
Youtube を表示する方法
Youtube を表示するためには a タグに data-fancybox を追加して、href に動画のリンクを追加します。
<a data-fancybox href="https://www.youtube.com/watch?v=cKf4cqx3MXQ">YouTube</a>
フルスクリーンボタンを非表示
右上に表示されるフルスクリーンボタンを非表示にする方法を紹介します。
オプションの設定で非表示も可能ですが、手っ取り早く CSS で非表示にしたい場合は、CSS に次のクラス指定を追加します。
.fancybox-button--fullscreen{
display:none !important;
}
まとめ
モーダルウィンドウ fancybox の実装方法を紹介しました。
