ハシウェブ

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

fancybox3の使い方、カスタマイズ例(v3.5) ポップアップ簡単設置【jQuery】

この記事は、最初の投稿から1年以上が経過しています。

最終更新から238日が経過しています。

fancybox3の使い方、カスタマイズ例(v3.5)  ポップアップ簡単設置【jQuery】

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

「fancybox3の使い方を知りたい」

悩み

こんな悩みにお答えします。

jQueryを使ってもいいから簡単に設置するには、「fancybox3」が便利です。

fancybox デモ

この記事ではこんなことがわかります。

  • fancyboxの使い方
  • fancyboxのカスタマイズ例

記事を読み終えると、Webサイトの画像や動画をクリックして拡大表示することができるようになります。

目次
  1. fancybox3の使い方
    1. 準備 (プラグイン読み込み)
    2. HTML (画像)
    3. HTML (iframe)
  2. カスタマイズ例
    1. キャプションを変更する
  3. まとめ

fancybox3の使い方

公式サイト

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プラグインも用意されています。

jQuery不要でモーダル・ポップアップが設置できるプラグイン「lightgallery」については、こちらの記事で詳しく解説しています。

lightgallery.jsの使い方!モーダル・ポップアップを簡単設置!【jQuery不要】

モーダルウインドウ・ポップアップウインドウを簡単に設置したいですか?この記事では、JavaScriptプラグインlightgallery.jsのメリット、デメリット、使い方を紹介しています。ぜひご覧ください。

カスタマイズ例

fancyboxでよく使うカスタマイズ例を紹介します。

キャプションを変更する

こんなときに使うカスタマイズです。

  • コーポレートサイトの施工事例、事業紹介などで画像拡大が必要なページ
  • キャプションに複数の項目を使いたいとき
  • 項目ごとに文字サイズ、色などを変更したいとき

単純にキャプションだけであれば、デフォルト機能で「data-caption」にテキストを入れればいいのですが、日付、タイトル、説明、カテゴリなどを別々のデザインにしたりするにはこのカスタマイズが必要になります。

WordPressであれば、カスタムフィールドを設定して、投稿ごとなどにそれぞれの項目、値が入るようにしていきます。

HTMLタグにはaタグにデフォルト機能の「data-caption」ではなく、「data-cate」「data-date」「data-title」「data-text」をそれぞれ設定します。

<a href="img/img_large.jpg" data-fancybox="gallery" data-cate="カテゴリ" data-date="2020年12月1日" data-title="タイトルです" data-text="説明です説明です説明です説明です">
  <img src="img/img.jpg" alt="画像">
</a>

fancyboxのオプション設定のcaptionに、クリックした項目のdata属性をそれぞれ取得し、取得した値とそれを出力したいHTMLタグを設定していきます。


<script type="text/javascript">
  $("[data-fancybox]").fancybox({
    loop: true,
    caption: function (instance, item) {
      cate = $(this).data('cate');
      date = $(this).data('date');
      title = $(this).data('title');
      text = $(this).data('text');

      caption = "";
      caption += "<p class='fancybox-cate'>" + cate + "</p>";
      caption += "<p class='fancybox-date'>" + date + "</p>";
      caption += "<p class='fancybox-title'>" + title + "</p>";
      caption += "<p class='fancybox-text'>" + text + "</p>";

      return caption;
    }

  });
</script>

データ属性については、こちらの記事で解説しています。

データ属性の取得方法(jQuery・JavaScript・CSS)【HTML】

HTMLのdata属性の使い方を知りたいですか?この記事では、data属性の使い方、JavaScript、jQuery、CSSでのdata属性の取得方法を紹介しています。ぜひご覧ください。

参考サイト
人気のfancyBoxの使い方

まとめ

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

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

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

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