ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

モーダル・ポップアップを簡単設置! fancyboxの使い方 デモあり【jQuery】

モーダル・ポップアップを簡単設置! fancyboxの使い方 デモあり【jQuery】

「モーダルウインドウ・ポップアップウインドウを簡単に設置したい」
「fancyboxの使い方を知りたい」

悩み

こういった悩みにお答えします。

目次
  1. fancyboxの使い方
    1. 準備 (プラグイン読み込み)
    2. HTML (画像)
    3. HTML (iframe)
  2. まとめ

fancyboxの使い方

公式サイト

POINT
Googleで「fancybox」を検索した場合、http://fancybox.net/が一番に表示されますが、これは旧バージョンの公式サイトです。
http://fancyapps.com/fancybox/3/が最新バージョンの公式サイトです。
旧バージョンはレスポンシブなどの機能が弱いので間違えないように注意してください。

準備 (プラグイン読み込み)

まず、jQuery本体をheadで読み込みます。

// jQuery 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

fancyboxのJSとCSSを読み込みます。
CSSはhead内、JSはbody閉じタグ直前で読み込みます。

// fancybox CSS
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

// fancybox JS
<script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

HTML (画像)

画像の場合、以下のように書きます。

<a data-fancybox="gallery" href="apple@w640.jpg" data-caption="りんご">
  <img src="apple@w320.jpg" width="320" height="240" />
</a>
  • imgタグにサムネイル画像を指定します。
  • aタグ、hrefに拡大時の画像を指定します。
  • aタグ、data-captionにキャプションを指定します。
  • 画像が複数あり、ギャラリー表示する場合は、aタグ、data-fancyboxを同じ値にします。

特に細かい指定がなければ、これだけでfancyboxを使うことができます。

fancybox デモ

HTML (iframe)

YouTube動画やGoogle mapのiframeにも対応しています。

<a data-fancybox data-type="iframe" data-src="https://www.youtube.com/embed/●●" href="javascript:;">
  YouTube動画
</a>
  • aタグ、data-typeに「iframe」を指定します。
  • aタグ、srcに表示させたいiframeのURLを指定します。
  • aタグ、hrefにjavascript:;を指定します。(別ページへリンクしないように)

fancybox iframe デモ

オプションなどは以下の記事で詳しく紹介されています。

モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション

Lightboxなどに代表される、画像やビデオをページを推移せずにオーバーレイ表示させる機能は、昨今のwebサイトでは必須の技術と言っても良いでしょう。 現在、jQueryプラグインとしてさまざまなオーバーレイ プログラムが提供されています

WordPressプラグインも用意されています。

まとめ

fancyboxの使い方を紹介しました。

fancyboxは、ほとんど特別な設定をすることなくモーダルウインドウを使うことができるのでとても便利です。

Web制作を効率化したい!よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選

Web制作を効率化したいですか?この記事では、Web制作でよく使うスライダー、スクロールエフェクト、モーダルウィンドウ、郵便番号から住所を自動入力などに便利なJavaScript、jQueryのプラグイン、ライブラリを紹介しています。ぜひご覧ください。