FancyBoxでサイトの画像をポップアップ表示

更新日：2020年5月18日

FancyBoxとは、JavaScriptコードを簡単に記述することができるJavaScriptライブラリ「jQuery」のプラグインです。サイト内の画像をクリックすると、ポップアップ表示してくれる機能になります。さらに、複数枚の画像をギャラリー表示することやポップアップ画像にタイトルを付けることもできる便利なプラグインです。

FancyBox：ライセンス
FancyBox：ダウンロード
FancyBox：HTMLの記述
FancyBoxのまとめ
FancyBox：オプション指定
YouTubeのポップアップ
Google Mapのポップアップ

【関連記事】
easy fancybox　contact form 7　browser shots　susie プラグイン　画像　プラグイン

FancyBox：ライセンス

FancyBoxはバージョンによって、ライセンスが異なります。

新バージョン（v2以降）：商用利用の場合は有料
旧バージョン（v1）：MITライセンス

今回は旧バージョンのFancyBoxを紹介しています。

FancyBox：ダウンロード

FancyBoxを使うには、ファイルをダウンロードしてサーバーにアップロードします。アップロードする際は、扱いやすいように必要なファイルのファイル名を変更しておきます。

1.ダウンロード

下記URLより、「Version 1.3.4 (2010/11/11)」をクリックして圧縮ファイル「jquery.fancybox-1.3.4.zip」をダウンロードして解凍します。

http://fancybox.net/

2.アップロード

解凍したフォルダ「jquery.fancybox-1.3.4」内の「jquery.fancybox-1.3.4」→「fancybox」をクリックし、その中の画像ファイル（.png）と下記3つのファイルを以下の名前に変更後、サーバーにアップロードします。

jquery.fancybox-1.3.4.pack.js　→　fancybox.js
jquery.fancybox-1.3.4.css　→　fancybox.css
jquery.easing-1.3.pack.js　→　easing.js

FancyBox：HTMLの記述

HTMLのソースコードは、画像の表示・複数枚の画像の表示・タイトル付きの画像の表示のそれぞれのソースコードと共通のソースコードがあります。

1.共通コード

下記コードを<head> </head>内に記述します。

$(document).ready(function() {

$(".group").fancybox({

'hideOnContentClick': true,

'zoomSpeedIn' : 500,

'zoomSpeedOut': 500,

'zoomSpeedChange': 500,

'overlayShow' : true,

'overlayOpacity' : 0.5,

'easingIn' : 'easeInOutBack',

'easingOut' : 'easeInOutBack',

'easingChange' : 'easeInOutBack'

});

</script>

2.画像の表示

3.複数枚の画像の表示

4.タイトル付きの画像の表示

FancyBoxのまとめ

サイト内の画像をポップアップ表示してくれるjQueryプラグイン「FancyBox」を紹介しました。必要なファイルをアップロードし、head内に共通コードを記述したら、準備は完了です。本文の画像を表示する場所に、表示方法ごとに画像の指定コードを記述するだけです。サイトの見栄えが良くなるので是非、WordPressでの制作の際に使用してみて下さい。

ここまでは、サイトの画像をLightbox 風にWebページにポップアップ表示するjQueryのプラグイン（Plugin）「FancyBox」の基本的な使い方を紹介しました。ここからは、オプションと画像以外をポップアップ表示する方法を紹介します。

FancyBox：オプション指定

FancyBoxでは、下記のようなオプションを指定することができます。全てのオプションは、こちら【Available Options】の一覧からご確認下さい。

width：ポップアップ表示画面の幅
height：ポップアップ表示画面の高さ
margin：ポップアップウィンドウの余白部分
changefade：画像の切り替え時の速度
type：image・ajax・iframe・swf・inlineからのコンテンツ対応選択

YouTubeのポップアップ

YouTube動画をポップアップ表示するには、クラス属性に『ifreme』を追加し、href 属性にYouTubeの動画の埋め込みコードを設定したソースコードをbody内に書きます。

1.YouTubeの埋め込みコード取得方法

YouTubeで表示する動画を開き、動画の右下にある「共有」をクリックし、「リンクの共有」画面で「埋め込み」をクリックします。すると、「動画の埋め込み」画面でコードが表示されます。その内の「src=" "」部分の中身「https://www.youtube.com/embed/□□」になります。

2.ソースコード

<ul>

</ul>

jQuery(function($){

$(".youtube").fancybox();

});

</script>

Google Mapのポップアップ

Google Mapをポップアップ表示するには、クラス属性に『ifreme』を追加し、href 属性にGoogle Mapの埋め込みコードを設定したソースコードをbody内に書きます。

1.Google Mapの埋め込みコード取得方法

Google Mapで表示する地図を開き、画面左上にある横棒３本線の「メニュー」ボタンをクリックして「地図を共有または埋め込む」をクリックし、「共有」画面で「地図を埋め込む」をクリックします。すると、「共有」画面上部にコードが表示されます。その内の「src=" "」部分の中身「https://www.google.com/maps/embed?pb=□□」になります。