モーダルウィンドウ fancybox の実装方法

モーダルウィンドウ fancybox の実装方法を紹介します。
jQuery を使ったライトボックススクリプト(モーダルウィンドウ)の中でも、実装が簡単な fancybox3 の実装方法を紹介します。

  1. fancybox とは
  2. 簡単セットアップ
    1. ファイルのダウンロード
    2. 1.CSS ファイルの読み込み
    3. 2.javascript ファイルの読み込み
    4. 3.javascript を追加
  3. Youtube を表示する方法
  4. フルスクリーンボタンを非表示

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 の実装方法を紹介しました。