人気のjQuery fancyBox v2
(準備、基本機能、応用機能)

fancyBoxは、画像など多くのコンテンツのビューアとして人気のあるjQuery系のLightboxです。

fancyBoxには、おおまかに5つの機能があります。
  1. 個別画像表示
  2. グループ画像表示(ギャラリースライドショー 矢印アローアイコンナビ)
  3. 画像以外のバリエーション(Ajax、Iframe、Inline、SWF、Youtube (iframe)、 Google maps (iframe) など)
  4. ボタンナビおよびナムネールナビのグループ画像表示(ギャラリースライドショーのバリエーション)
  5. メディア表示(Youtube、Vimeo、Metacafe、Dailymotion、Twitvid、Twitpic、Instagram、Google mapsなど)

1.、2.、3.は、fancyboxメインのJS,CSSファイルを使用します - メイン基本機能。
4.、5.は、メインファイルにオプションのJS,CSSファイルを追加して使用します - オプション応用機能。

準備

 Fancyboxファイルのダウンロード

Fancybox ZIPファイルについてFancyboxサイトからdownload v2.1.5(fancyapps-fancyBox-v2.1.5-0-ge2248f4.zip) を、またはGitHubサイトからDownload Zip(fanctBox-master.zip)をダウンロードし、解凍します。
解凍結果はつぎのようになります。解凍後、下のlibフォルダおよびsourceフォルダを丸ごとサーバーへアップロードします。
Fancybox提供のデモを行いたい場合は、demoフォルダもサーバーへアップロードします。
なお、本ページは、demoフォルダ内にアップロードしています。

まお、ダウンロードをしたくない場合は、CDNJSサイトのFancyboxファイルを使用します。

 Fancyboxファイルのインクルード方法(HTML)

Fancyboxを使用するためには、jQueryファイルとFancyboxのCSSファイル、JSファイルが必要です。 これらのファイルをロードするには、SCRIPTタグやLINKタグで<HEAD>内に記述します。 下のHTML例の「必須」ファイルを使用すれば、Fancyboxの基本の機能を実現することができます。必要に応じ「オプション」ファイルを追加します。
jquery.fancybox.pack.jsはjquery.fancybox.jsの圧縮版で、どちらかを使用します。

<!-- Fancyboxをダウンロードした場合 -->
<!-- Add jQuery library 必須 ↓ メインファイル -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional オプションファイル)  ↓ -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox  必須  ↓ メインファイル -->
<link rel="stylesheet" href="../source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media  オプションファイル -->
                                                                            <!-- button用 ボタンナビ  ↓ -->
<link rel="stylesheet" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
                                                                            <!-- thumbnail用 サムネールナビ  ↓ -->
<link rel="stylesheet" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
                                                                            <!-- media用 メディア  ↓ -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<!-- Fancyboxをダウンロードしない場合 -->
<!-- Add jQuery library 必須 ↓ メインファイル -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional オプションファイル)  ↓ 以下CDNJSサイトのファイル使用 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>

<!-- Add fancyBox  必須  ↓ メインファイル -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

<!-- Optionally add helpers - button, thumbnail and/or media  オプションファイル -->
                                                                            <!-- button用 ボタンナビ  ↓ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
                                                                            <!-- thumbnail用 サムネールナビ  ↓ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
                                                                            <!-- media用 メディア  ↓ -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>

 Fancybox 画像定義の方法(HTML)

Aタグでモーダルウインドーに表示する画像を記述し、IMGタグでサムネール画像を記述します。
Aタグ内のCLASS属性のクラス名は、JavascriptのFancybox初期設定で定義した名前(赤字のクラスセレクタの値'fancybox')と合わせます。下の例では'fancybox'です。 AタグTITLE属性でタイトルを記述できます。
また、ギャラリー(グループ画像スライドショー)の場合はAタグREL属性またはdata-fancybox-group属性でグループ名を定義します。
・単独画像
<a class="fancybox" href="big_image_1.jpg" title="image1"><img src="small_image_1.jpg" alt="" /></a>

・ギャラリー(グループ画像)
<a class="fancybox" rel="group" href="big_image_1.jpg" title="image1"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg" title="image2"><img src="small_image_2.jpg" alt="" /></a>
                         <!--  ↑ または data-fancybox-group="group" --> 

 Fancybox HTMLまとめ

Fancyboxの基本の機能を実現するHTML例を示します。
<html>
<head>
	<title>fancyBox</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<!-- jQuery ファイル -->
	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
	<!-- fancyBox メイン JS、CSS ファイル -->
	<script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox(); /* Fancybox設定(jQuery設定)赤字はクラスセレクター名 */
	});
</script>

</head>
<body>

<!--ギャラリー(グループ画像)-->
<a class="fancybox" rel="group" href="big_image_1.jpg" title="画像1"><img src="small_image_1.jpg" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg" title="画像2"><img src="small_image_2.jpg" /></a>

</body>
</html>

画像などコンテンツが表示さるFancyboxウィンドーのイメージはつぎのとおりです。
Fancyboxオプションのpaddingは、Fancyboxウィンドー内のコンテンツの周りの余白の長さで、デフォルト値は15px。
marginは、Fancyboxウィンドーとビューポートの最小の余白の長さで、デフォルト値は20px。
CSSのbox-shadowは、Fancyboxウィンドーのボックスの周りに影を生成しています。
参考までに、上のHTMLまとめのHTMLコード例もFancyboxのCSSと同じbox-shadowを使用して影を作成しています。

Ⅰ.fancyBox メイン基本機能

ここのベーシック機能のデモでは、1.個別画像表示 2.グループ画像表示(ギャラリースライドショー 矢印アローアイコンナビ)3.画像以外のバリエーション(Ajax、Iframe、Inline、SWF、Youtube (iframe)、 Google maps (iframe) など) を行っています。
fancyBox ベーシック機能を使用するには、つぎのjQueryファイルおよび fancyBoxの必須メインファイルをインクルードします。
  <!-- jQueryファイル -->
  <script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
  <!-- fancyBox メイン JS、CSS ファイル -->
  <script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>
  <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
   

 シンプルな個別画像(3枚)

JavascriptのFancybox設定で定義したクラスセレクタ名を画像をリンクするAタグのClass名に使用します。
画像のURLはhref属性またはdata-fancybox-href属性で記述します。 AタグTITLE属性またはdata-fancybox-title属性ででタイトルを記述できます。

  <a class="fancybox" href="flower/P5310024.jpg" title="エゴノキ">
                                 <img src="flower/P5310024.jpg" width=150 /></a>
  <a class="fancybox" data-fancybox-href="flower/P5300012.jpg" title="エゴノキと松葉菊">
                                 <img src="flower/P5300012.jpg" width=150 /></a>
  <a class="fancybox" href="flower/niwaume2.jpg" data-fancybox-title="ニワ梅">
                                 <img src="flower/niwaume2s.jpg" width=150 /></a>
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();

	});
</script>

 シンプルな画像ギャラリー(グループ画像)

JavascriptのFancybox設定で定義したクラスセレクタ名を画像をリンクするAタグのClass名に使用します。 AタグTITLE属性でタイトルを記述できます。
また、ギャラリー(グループ画像スライドショー)の場合はAタグREL属性またはdata-fancybox-group属性でグループ名を定義します。

 <a class="fancybox" href="mume/P2270046.jpg" data-fancybox-group="gallery" title="ウメ1 羽根木公園">
                                              <img src="mume/P2270046s.jpg" alt="" width=140 /></a>
 <a class="fancybox" href="mume/P2270047.jpg" data-fancybox-group="gallery" title="ウメ2 羽根木公園">
                                              <img src="mume/P2270047s.jpg" alt="" width=140 /></a> 
 <a class="fancybox" href="mume/P2270061.jpg" data-fancybox-group="gallery" title="ウメ3 羽根木公園">
                                              <img src="mume/P2270061s.jpg" alt="" width=140 /></a>
 <a class="fancybox" href="mume/P2270067.jpg" data-fancybox-group="gallery" title="ウメ4 羽根木公園">
                                              <img src="mume/P2270067s.jpg" alt="" width=140 /></a>
 <a class="fancybox" href="mume/P2270059.jpg" data-fancybox-group="gallery" title="ウメ5 羽根木公園">
                                              <img src="mume/P2270059s.jpg" alt="" width=140 /></a>
<script type="text/javascript">
    $(document).ready(function() {
         /* シンプル個別画像用設定とシンプルグループ画像設定 */
	$(".fancybox").fancybox();
     });
</script>

 効果、open、closeの4つのバリエーションとデフォルト(個別画像5枚)

効果などのオプションの設定により、Fancyboxの表示にバリエーションをつけることができまます。 ここのデモは、5枚の画像で5つのバリエーションを比較して見ることができます。デモのオプションなどの設定値は下表参照。

Fancyboxオプションなどの設定
openEffectcloseEffectopenSpeedcloseSpeedhelper
-title
-type
helper
-overlay
closeClickpadding備考
1枚目 fadefade1000250outsidespeedOut:1000false20
2枚目 nonenone無効無効over未定義false20
3枚目 nonefade無効250insidecss-'background' :
'rgba(0,0,255,0.3)'
true20※1
4枚目 elasticelastic500150floatnulltrue0
5枚目 fadefade250250float未定義false20
注 記 ※1:CSS box-shadow のカスタマイズあり。
Fancyboxウインドーのボックスの四隅(左右、上下)に影を付けます(下の「JavascriptとCSS」参照)。
デフォルトは、ボックスの三隅(左右、下)に影を付けます(こちらを参照)。

 <a class="fancybox-effects-a" href="bird/pixabay12-960x640.jpg" title="1 Change title type, overlay closing speed">
              <img src="bird/pixabay12-s.jpg" alt="" width=140 /></a></li>
 <a class="fancybox-effects-b" href="bird/pixabay12-960x640.jpg" title="2 Disable opening and closing animations, change title type">
              <img src="bird/pixabay12-s.jpg" alt="" width=140 /></a></li> 
 <a class="fancybox-effects-c" href="bird/pixabay12-960x640.jpg" title="3 Set custom style, close if clicked, change title type and overlay color">
              <img src="bird/pixabay12-s.jpg" alt="" width=140 /></a></li>
 <a class="fancybox-effects-d" href="bird/pixabay12-960x640.jpg" title="4  Remove padding, set opening and closing animations, close if clicked and disable overlay">
              <img src="bird/pixabay12-s.jpg" alt="" width=140 /></a></li>
 <a class="fancybox" href="bird/pixabay12-960x640.jpg" title="デフォルト">
              <img src="bird/pixabay12-s.jpg" alt="" width=140 /></a></li>
<script type="text/javascript">
    $(document).ready(function() {
                        // デフォルト設定 
               		$(".fancybox").fancybox();

			// Change title type, overlay closing speed
			$(".fancybox-effects-a").fancybox({
				openSpeed  : 1000, 
				helpers: {
					title : {
						type : 'outside'
					},
					overlay : {
						speedOut : 1500
					}
				}
			});

			// Disable opening and closing animations, change title type
			$(".fancybox-effects-b").fancybox({
				openEffect  : 'none',
				closeEffect	: 'none',

				helpers : {
					title : {
						type : 'over'
					}
				}
			});

			// Set custom style, close if clicked, change title type and overlay color
			$(".fancybox-effects-c").fancybox({
				wrapCSS    : 'fancybox-custom',
				closeClick : true,

				openEffect : 'none',

				helpers : {
					title : {
						type : 'inside'
					},
					overlay : {
						css : {
							'background' : 'rgba(0,0,255,0.3)'  /*'rgba(238,238,238,0.85)'*/
						}
					}
				}
			});

			// Remove padding, set opening and closing animations, close if clicked and disable overlay r255 g182 b193
			$(".fancybox-effects-d").fancybox({
				padding: 0,

				openEffect : 'elastic',
				openSpeed  : 500, /* 150 */

				closeEffect : 'elastic',
				closeSpeed  : 150,

				closeClick : true,

				helpers : {
					overlay : null
				}
			});
     });
</script>
<style type="text/css">
		.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}    /* box-shadow:横方向 縦方向 (ぼかし) (広がり) (影の色) (影の向き) */
</style>

 効果、next、prevのアニメーションバリエーション(グループ画像)

グループ画像(ギャラリー)の場合、next、prevのオプションの設定により、画像遷移のアニメーションにバリエーションをつけることができまます。
ここのデモは、2つのグループでバリエーションを比較して見ることができます。デモのオプションなどの設定値は下表参照。

Fancyboxオプションの設定
openEffect /
closeEffect
nextEffectprevEffectopenSpeed /
closeSpeed
nextSpeedprevSpeedhelper
-title
-type
autoPlay /
loop
afterLoad
グループ1 fadefadeelastic250500500outsidetrue /
false
カレント
枚数表示
グループ2 fadeelasticelastic250250250floatfalse /
true
未設定


▽グループ1
▽グループ2(デフォルト)
<!-- グループ1 --> 
<a class="fancybox-group1" rel="group1" href="sun/sun-pixabay01.jpg" title="1 SUN"><img src="sun/sun-pixabay01s.jpg" alt="" width=140 /></a>
 <a class="fancybox-group1" rel="group1" href="sun/sun-pixabay02.jpg" title="2 SUN"><img src="sun/sun-pixabay02s.jpg" alt="" width=140 /></a> 
 <a class="fancybox-group1" rel="group1" href="sun/sun-pixabay03.jpg" title="3 SUN"><img src="sun/sun-pixabay03s.jpg" alt="" width=140 /></a>
 <a class="fancybox-group1" rel="group1" href="sun/sun-pixabay04.jpg" title="4 SUN"><img src="sun/sun-pixabay04s.jpg" alt="" width=140 /></a>
 <a class="fancybox-group1" rel="group1" href="sun/sun-pixabay05.jpg" title="5 SUN"><img src="sun/sun-pixabay05s.jpg" alt="" width=140 /></a>

<!-- グループ2 デフォルト -->
 <a class="fancybox" rel="group2" href="sun/sun-pixabay01.jpg" title="1 SUN"><img src="sun/sun-pixabay01s.jpg" alt="" width=140 /></a>
 <a class="fancybox" rel="group2" href="sun/sun-pixabay02.jpg" title="2 SUN"><img src="sun/sun-pixabay02s.jpg" alt="" width=140 /></a> 
 <a class="fancybox" rel="group2" href="sun/sun-pixabay03.jpg" title="3 SUN"><img src="sun/sun-pixabay03s.jpg" alt="" width=140 /></a>
 <a class="fancybox" rel="group2" href="sun/sun-pixabay04.jpg" title="4 SUN"><img src="sun/sun-pixabay04s.jpg" alt="" width=140 /></a>
 <a class="fancybox" rel="group2" href="sun/sun-pixabay05.jpg" title="5 SUN"><img src="sun/sun-pixabay05s.jpg" alt="" width=140 /></a>
</ul>
<script type="text/javascript">
    $(document).ready(function() {
                        // デフォルト設定 グループ2 
               		$(".fancybox").fancybox();

                        // ベーシック機能グループ設定 グループ1
			$(".fancybox-group1").fancybox({
			  afterLoad : function() {
 			      this.title = '( ' + (this.index + 1) + ' 枚目 / ' + this.group.length + ' 枚中' + (this.title ? ' ) ' + this.title : '');
			      },
                                        autoPlay : true,
					openEffect : 'none',
					closeEffect : 'none',
					prevEffect : 'fade',
					nextEffect : 'elastic',
				        prevSpeed  : 500,
				        nextSpeed  : 500,
				helpers: {
					title : {
						type : 'outside'
					}
				}
			});



		});
</script>

 基本機能のメディアコンテンツ~inline/Ajax/HTML/swf/YouTube/Google maps

fancyBoxはhref属性からコンテンツタイプを推測しますが、CLASS属性に、クラス名(fancybox.image、fancybox.iframeなど)を追加して指定するか、 data-fancybox-type属性で直接記述することができます。 サポートするタイプは、'image'、'inline'、'ajax'、'iframe'、'swf' および 'html'です。

<ul>
 <li><a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay01.jpg" title="ギャラリー 1 SUN">太陽の光ギャラリー(画像グループ)</a>
 <a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay02.jpg" title="2 SUN"></a> 
 <a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay03.jpg" title="3 SUN"></a>
 <a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay04.jpg" title="4 SUN"></a>
 <a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay05.jpg" title="5 SUN"></a>
 </li>
 <li><a class="various" href="#inline1" title="カレントHTML内のインライン">Inline</a><!---カレントHTMLの内部ブロック-->
 <li><a class="various fancybox.ajax" href="ajax.txt">Ajax(ajax)</a><!---テキストデータ-->
 <li><a class="various fancybox.iframe" href="http://www.cinematoday.jp/" title="HTML">Iframe(iframe)</a><!---ウェブサイトHTML-->
 <li><a class="various" data-fancybox-type="swf" href="http://urbanqee.com/webutil/photo/colorbox/content/swf/fukusia-c.swf" title="フラッシュファイル">Swf</a>---フラッシュファイル
 <li><a class="various fancybox.iframe" href="https://www.youtube.com/embed/dNq2ZbTifkY" title="YouTube 4歳の少女ダンサー、ヘブン・キング(Heaven King)ちゃん">YouTube(iframe)</a>
 <li><a class="various fancybox.iframe" href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d65862.01211857248!2d139.63549907014828!3d35.465715438050964!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sja!2sjp!4v1449878977369" title="Googleマップ">Google maps (iframe)</a><p>(注.()内はコンテンツタイプ)</p>
</ul>
 (注.class属性内のfancybox.xxxxxxxxxxはコンテンツタイプ)
<script type="text/javascript">
    $(document).ready(function() {
       		        $(".various").fancybox(); // デフォルト設定
 		});
</script>

 キーボードによるFancyboxの操作

Fancyboxのギャラリーをキーボードのボタンにより操作できます。

キーボード
※関連するキーについて、青色、緑色、黄色でマークしています。2つあるキーは、色でマークしていない方も使用できます。

キーボード操作説明
機能名(Fancybox)キー名(キーボード)動作機能備考
nextEnter今の画像を左へ移動し、次の画像を表示(アニメーション動作)
Page Down今の画像を上へ移動し、次の画像を表示(アニメーション動作)
今の画像を左へ移動し、次の画像を表示(アニメーション動作)
今の画像を上へ移動し、次の画像を表示(アニメーション動作)
prevBackspace今の画像を右へ移動し、前の画像を表示(アニメーション動作)
Page Up今の画像を下へ移動し、前の画像を表示(アニメーション動作)
今の画像を右へ移動し、前の画像を表示(アニメーション動作)
今の画像を下へ移動し、前の画像を表示(アニメーション動作)
closeEscFancyboxをクローズ
start/stopspaceスライドショーをスタート、ストップ
fullscreenF画像を拡大/元に戻す(トグル)
※機能名(Fancybox)とキー名(キーボード)の対応はJavascriptで定義します。Javascriptは こちら

Ⅱ.fancyBox オプション応用機能

 ボタンタイプスライドショー

ボタンナビゲーションによるスライドショーを使用するには、jQueryファイルおよびFancyboxのメインファイル(JS、CSS)の他に、つぎの Fancyboxのボタン用ヘルパーファイル(jquery.fancybox-buttons.js、jquery.fancybox-buttons.css)を追加インクルードします。

<link rel="stylesheet" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    

ボタンヘルパーのスライドショーは、Fancyboxウインドーの上部(または下部)に、つぎのコントロールボタンが表示されます。

(左から、prev、スタート/ストップ、next、Fullscreen、Closeの各ボタン)
このデモ(ボタンナビ)は、オープン、クローズ、次へ、前への画像遷移のアニメーション効果について無効にしています。
また、スライドショーはボタンナビゲーションを使うので、通常は画面(コンテンツ)上にあるprev、next、Closeの各ボタンも隠して無効にしています。 nextアローアイコンを無効にした代わりに、画面(コンテンツ)の上をクリックすると次へ遷移することを有効にしています(nextClick)。

<a class="fancybox-buttons" href="people/girl-pixabay-01.jpg" data-fancybox-group="buttonsgallery" title="女性1"><img src="people/girl-pixabay-01s.jpg" alt="" width=140 /></a>
<a class="fancybox-buttons" href="people/girl-pixabay-02.jpg" data-fancybox-group="buttonsgallery" title="女性2"><img src="people/girl-pixabay-02s.jpg" alt="" width=140 /></a> 
<a class="fancybox-buttons" href="people/girl-pixabay-03.jpg" data-fancybox-group="buttonsgallery" title="女性3"><img src="people/girl-pixabay-03s.jpg" alt="" width=140 /></a>
<a class="fancybox-buttons" href="people/girl-pixabay-04.jpg" data-fancybox-group="buttonsgallery" title="女性4"><img src="people/girl-pixabay-04s.jpg" alt="" width=140 /></a>
<a class="fancybox-buttons" href="people/girl-pixabay-05.jpg" data-fancybox-group="buttonsgallery" title="女性5"><img src="people/girl-pixabay-05s.jpg" alt="" width=140 /></a>
<script type="text/javascript">
			$('.fancybox-buttons').fancybox({
				openEffect  : 'none',    //オープン時の効果を行わない
				closeEffect : 'none',    //クロース時の効果を行わない
				prevEffect : 'none',     //前への時の効果を行わない
				nextEffect : 'none',     //次への時の効果を行わない
				closeBtn  : false,       //クローズボタンを表示しない
				arrows    : false,       //prev/nextアイコンボタンを表示しない
				nextClick : true,        //nextアイコンボタンの代わりに、画像上のクリックで次へ遷移する

				helpers : {
					title : {
						type : 'inside'     //タイトルの表示位置はインサイト
					},
					buttons	: {                //ボタンヘルパーの定義(必須)
                                                position : bottom  //ボタンを下部に表示(デフォルトはtop-上部)
                                        }
				},

				afterLoad : function() {
					this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
				}       // ↑カレント枚数(何枚中何枚目)を表示
			});
</style>

 サムネールタイプスライドショー

サムネールナビゲーションによるスライドショーを使用するには、jQueryファイルおよびFancyboxのメインファイル(JS、CSS)の他に、つぎの Fancyboxのサムネール用ヘルパーファイル(jquery.fancybox-thumbs.js、jquery.fancybox-thumbs.css)を追加インクルードします。

<link rel="stylesheet" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    
このデモ(サムネールナビ)は、オープン、クローズの時のアニメーション効果については無効にしています(prev、nextアローアイコンは表示)。
また、スライドショーでは、Closeボタンが目障りなので隠して無効にしています。Fancyboxをクローズしたいときは、画面(コンテンツ)の外をクリックするかキーボードの「Esc」 キーを押します。
蛇足ですが、フルスクリーンを見たいときは、キーボードの「F」キー(トグル)を押します。

 <a class="fancybox-thumbs" href="people/girl-pixabay-01.jpg" data-fancybox-group="thumbsgallery" title="女性1"><img src="people/girl-pixabay-01s.jpg" alt="" width=140 /></a>
 <a class="fancybox-thumbs" href="people/girl-pixabay-02.jpg" data-fancybox-group="thumbsgallery" title="女性2"><img src="people/girl-pixabay-02s.jpg" alt="" width=140 /></a> 
 <a class="fancybox-thumbs" href="people/girl-pixabay-03.jpg" data-fancybox-group="thumbsgallery" title="女性3"><img src="people/girl-pixabay-03s.jpg" alt="" width=140 /></a>
 <a class="fancybox-thumbs" href="people/girl-pixabay-04.jpg" data-fancybox-group="thumbsgallery" title="女性4"><img src="people/girl-pixabay-04s.jpg" alt="" width=140 /></a>
 <a class="fancybox-thumbs" href="people/girl-pixabay-05.jpg" data-fancybox-group="thumbsgallery" title="女性5"><img src="people/girl-pixabay-05s.jpg" alt="" width=140 /></a>
<script type="text/javascript">
			/*
			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
			 */
			$('.fancybox-thumbs').fancybox({
				openEffect : 'none',      //オープン時の効果を行わない
				closeEffect : 'none',      //クローズ時の効果を行わない
				closeBtn  : false,        //クローズボタンを表示しない(クローズはFancyboxウインドーの外をクリック)

				helpers : {
					thumbs : {     //サムネールヘルパーの定義(必須)
						width  : 50,    //サムネール画像の大きさ width, height(デフォルトは50ピクセル)
						height : 50
					}
				}
			});
</style>

 ボタンタイプ+サムネールタイプのコラボスライドショー

スライドショーには、アローアイコン(基本機能)タイプ、ボタンタイプとサムネールタイプの3つのナビゲーションタイプがあります。 3つのタイプのスライドショーをコラボしてみました。
このデモ(ボタンナビ+サムネールナビ)は、オープン、クローズの時のアニメーション効果については無効にしています(prev、nextアローアイコンは表示)。 また、スライドショーでは、Closeボタンが目障りなので隠して無効にしています。Fancyboxをクローズしたいときは、画面(コンテンツ)の外をクリックするかキーボードの「Esc」 キーを押します。 蛇足ですが、フルスクリーンを見たいときは、キーボードの「F」キー(トグル)を押します。
デモは、スタート時は、自動でスライドショーは始まらないので、画面上の黒ボタンの 印(スタート/ストップ印)をクリックします。 なお、ボタンヘルパーサムネールヘルパーの両方のJS、CSSファイルのインクルードを忘れずに。

 <a class="fancybox-thumbsbuttons" data-fancybox-group="three-navi" href="flower/natur009.jpg" title="花1"><img src="flower/natur009.jpg" alt="" width=100 height=100 /></a>
 <a class="fancybox-thumbsbuttons" data-fancybox-group="three-navi" href="flower/natur010.jpg" title="花2"><img src="flower/natur010.jpg" alt="" width=100 height=100 /></a>
 <a class="fancybox-thumbsbuttons" data-fancybox-group="three-navi" href="flower/natur013.jpg" title="花3"><img src="flower/natur013.jpg" alt="" width=100 height=100 /></a>
 <a class="fancybox-thumbsbuttons" data-fancybox-group="three-navi" href="flower/natur021.jpg" title="花4"><img src="flower/natur021.jpg" alt="" width=100 height=100 /></a>
 <a class="fancybox-thumbsbuttons" data-fancybox-group="three-navi" href="flower/natur029.jpg" title="花5"><img src="flower/natur029.jpg" alt="" width=100 height=100 /></a>
 <a class="fancybox-thumbsbuttons" data-fancybox-group="three-navi" href="flower/natur035.jpg" title="花6"><img src="flower/natur035.jpg" alt="" width=100 height=100 /></a>
<script type="text/javascript">
                        /*   Thumbnail helper +   Button helper   */
			$('.fancybox-thumbsbuttons').fancybox({
				openEffect : 'none',
				closeEffect : 'none',
				closeBtn  : false,        //クローズボタンを表示しない

				helpers : {
					thumbs : {             //サムネールヘルパー定義(必須)
						width  : 50,   //サムネール画像の大きさ width, height(デフォルトは50ピクセル)
						height : 50
					},
					buttons	: {}           //ボタンヘルパー定義(必須)
				},
				afterLoad : function() {
					this.title = '' + (this.index + 1) + ' / ' + this.group.length + (this.title ? ' - ' + this.title : '');
				}       // ↑ カレント枚数(何枚中何枚目)を表示

			});
</style>

スライドショー画面
画像;スライドショー画面。
上中央黒ボタンナビゲーション(左から、前へ、スタート/ストップ、次へ、トグル(拡大)、クローズの各ボタン)。
下サムネールナビゲーション。そして、アローアイコンナビゲーション(マウスオーバーで表示)。

 応用機能のメディアコンテンツ
(Youtube、Vimeo、Dailymotion、Twitpic、Instagram、Google mapsなど)

各種メディア使用するには、jQueryファイルおよびFancyboxのメインファイル(JS、CSS)の他に、つぎの Fancyboxのメディア用ヘルパーファイル(jquery.fancybox-media.js)を追加インクルードします。 また、ボタンヘルパーやサムネールヘルパー機能を合せて使用する場合は、そのヘルパーファイルもインクルードします。

<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
   

メディアコンテンツのスライドショーをしてみました。

<ul class="list">
   <li><a class="fancybox-media" href="https://www.youtube.com/watch?v=spUW9auhHDU">Youtube</a></li>
   <li><a class="fancybox-media" href="https://vimeo.com/channels/staffpicks/162853145">Vimeo</a></li>
   <li><a class="fancybox-media" href="http://www.metacafe.com/embed/11420011/hell-summer/">Metacafe</a> <small>表示不可</small></li>
   <li><a class="fancybox-media" href="http://www.dailymotion.com/video/x44ny90_oggy-and-the-cockroaches-a-tip-for-the-road-s1e19-full-episode-in-hd_kids">Dailymotion</a></li>
   <li><a class="fancybox-media" href="http://twitvid.com/QY7MD">Twitvid</a> <small>表示不可</small></li>
   <li><a class="fancybox-media" href="http://twitpic.com/7p93st">Twitpic</a></li>
   <li><a class="fancybox-media" href="https://www.instagram.com/p/BD7Sm9yiJat/">Instagram</a></li>
      <li>
	Google maps
	<ul>
	     <li><a class="fancybox-media" href="http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17">Search results</a></li>
	     <li><a class="fancybox-media" href="http://maps.google.com/?ll=48.85796,2.295231&spn=0.003833,0.010568&t=h&z=17">Direct link</a></li>
	     <li><a class="fancybox-media" href="http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56">Street view</a></li>
	</ul>
      </li>
</ul>
<script type="text/javascript">
		/*
		 *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
		*/
		$('.fancybox-media')
			.attr('rel', 'media-gallery')  //メディアコンテンツのスライドショー(rel要素)。個々に表示する場合は不要。
			.fancybox({
				openEffect : 'none',   //メディアコンテンツのためすべての効果を無効にする
				closeEffect : 'none',
				prevEffect : 'none',
				nextEffect : 'none',

				helpers : {
					 media : {},   //メディアヘルパーの定義(必須)
					 buttons : {}  //メディアコンテンツのスライドショーにボタンヘルパーを使用する。個々に表示する場合は不要。
				}
			});
</style>

Ⅲ.Fancybox API Open manually および transitions

次のページ

 API Open manually(文字をクリックして画像などコンテンツを開く)

 API 画像ギャラリーでタイトルにカレントインデックス(枚数)を表示

 API API ドットナビゲーション(dot navigation)

 Fancybox transitions 遷移アニメーション

TOP準備ⅠfancyBox基本機能ⅡfancyBox応用機能ⅢfancyBox API transitions


Lightbox系メディアビューア(まとめ サイト内リンク)

NoビューアーJSフレームワークモーダル
window*2
画像動画*1動画共有サイト
動画
Webページスライドシュー備考
1LightboxPrototypeからjQueryに変更(v2.51)モーダル人気
2PiroboxjQueryモーダル推奨
3Videoboxmootoolsモーダル
4Mediaboxmootoolsモーダル
5ShadowboxPrototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、
Yahoo! User Interface Library、
Ext (requires ext-core.js)、 非JSフレームを選択可
モーダル推奨
6ColorboxjQueryモーダル
7FotoramajQuery非モーダルスライダー
8FancyboxjQueryモーダル人気
動画とは、SWF、FLV、MOV、WMV(*1)  モーダルwindow:画像などメディアの表示は新しい別ウインドー(*2)

  最終更新日:2017.5.29(sns button demo)