人気のjQuery fancyBox v2
(API、transitions遷移アニメーション)

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サイトのデモページ:http://fancyapps.com/fancybox/demo/
・fancyBoxサイト: www.fancyapps.com/fancybox/

Ⅲ.Fancybox API および transitions

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

APIを使って、画像など各種のコンテンツを文字列をクリックして開きます(APIを使用しない同じ機能は基本機能にあります)。 コンテンツタイプには、'image', 'inline', 'ajax', 'iframe', 'swf' および 'html' があります。 コンテンツの呼び出し方は、つぎのとおりです。

<script type="text/javascript">
			$("#fancybox-manual-a").click(function() {  //赤字はセレクター名=AタグのID名
				$.fancybox.open('sun/sun-pixabay01.jpg');
			});
</script>
</head>
<body>
<a id="fancybox-manual-a" href="javascript:;">1枚の画像を開く</a> 
            <!-- ↑ Javascriptの呼び出し 赤字はJavascriptのセレクター名-->
    

コンテンツのURL、コンテンツタイプやタイトルなどはJavascriptで定義します。
コンテンツタイプの定義は、画像(image)、インライン(inline)やフラッシュファイル(swf)の場合、HREFの情報から判定してくれるので省略しても構いません。 なお、ボタンヘルパーやサムネールヘルパー機能を合せて使用する場合は、そのヘルパーファイルをインクルードします。

<a id="fancybox-manual-a" href="javascript:;">1枚の画像を開く(a)</a>
<a id="fancybox-manual-b" href="javascript:;">1つのコンテンツを開く - 例:YouTube(b)</a>
<a id="fancybox-manual-c" href="javascript:;">ギャラリーを開く(c)</a>
<script type="text/javascript">
			/*
			 *  Open manually
			 */
                       // 1枚の画像を開く(a)コンテンツタイプ省略例(image)
			$("#fancybox-manual-a").click(function() {
				$.fancybox.open('sun/sun-pixabay01.jpg');
			});

                       // 1つのコンテンツを開く - 例:YouTube(b)コンテンツタイプ指定例
			$("#fancybox-manual-b").click(function() {
				$.fancybox.open({
					href : 'https://www.youtube.com/embed/44FFQwr8YXA',
					type : 'iframe',  // コンテンツタイプ
					padding : 5
				});
			});

                       // ギャラリーを開く(c)コンテンツタイプ省略例(image)
			$("#fancybox-manual-c").click(function() {
				$.fancybox.open([
 { href : 'sun/sun-pixabay01.jpg', title : '1 SUN' },
 { href : 'sun/sun-pixabay02.jpg', title : '2 SUN' }, 
 { href : 'sun/sun-pixabay03.jpg', title : '3 SUN' },
 { href : 'sun/sun-pixabay04.jpg', title : '4 SUN' },
 { href : 'sun/sun-pixabay05.jpg', title : '5 SUN' }
				], {
			        	closeBtn  : false,

					helpers : {
						thumbs : {
							width: 75,
							height: 50,
                                                        position : 'top'
						}
					}
				});
			});
</style>

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

ギャラリーでタイトルに、いわゆる何枚中何枚目を埋め込み表示したい場合はつぎのAPI afterLoad関数で、タイトルにカレントインデックス を埋め込み取得します(Javascriptサンプル例)。 下の赤字の部分(Image、of、-)を好みの文字に修正します。
Javascriptの「this.index + 1」がカレントインデックス(何枚目)で、「this.group.length」が総数です。

 //Fancybox afterLoadのカレントインデックス取得サンプル例
 afterLoad : function() {
   this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
  }

このサンプル例の表示イメージはこちら
    
例えば、タイトルに「(何枚目/何枚中)」と表示したい場合は、つぎのように修正します。
 //Fancybox afterLoadのカレントインデックス取得カスタマイズ修正例
 afterLoad : function() {
   this.title = '' + (this.index + 1) + '枚目/' + this.group.length + (this.title ? '枚中)' + this.title : '');
  }
    

 <a class="fancybox-group1" href="people/girl-pixabay-11.jpg" data-fancybox-group="currentIndexG" title="女性1"><img src="people/girl-pixabay-11s.jpg" alt="" width=128 /></a>
 <a class="fancybox-group1" href="people/girl-pixabay-12.jpg" data-fancybox-group="currentIndexG" title="女性2"><img src="people/girl-pixabay-12s.jpg" alt="" width=128 /></a> 
 <a class="fancybox-group1" href="people/girl-pixabay-13.jpg" data-fancybox-group="currentIndexG" title="女性3"><img src="people/girl-pixabay-13s.jpg" alt="" width=128 /></a>
 <a class="fancybox-group1" href="people/girl-pixabay-14.jpg" data-fancybox-group="currentIndexG" title="女性4"><img src="people/girl-pixabay-14s.jpg" alt="" width=128 /></a>
 <a class="fancybox-group1" href="people/girl-pixabay-02.jpg" data-fancybox-group="currentIndexG" title="女性5"><img src="people/girl-pixabay-02s.jpg" alt="" width=128 /></a>
 <a class="fancybox-group1" href="people/girl-pixabay-16.jpg" data-fancybox-group="currentIndexG" title="女性6"><img src="people/girl-pixabay-16s.jpg" alt="" width=128 /></a>
<script type="text/javascript">
 $(document).ready(function() {
       $(".fancybox-group1").fancybox({
 	   afterLoad : function() {
	     this.title = '' + (this.index + 1) + '枚目/' + this.group.length + (this.title ? '枚中 )' + this.title : '');
	      },      //APIカレントインデックス(枚数)修正
           autoPlay : true,
           loop : false,
	   openEffect : 'none',
	   closeEffect : 'none',
	   prevEffect : 'fade',
	   nextEffect : 'elastic',
           prevSpeed  : 500,
           nextSpeed  : 500,
 	   helpers: {
	       title : {
		  type : 'outside'
		 }
	     }
	});
  });
</script>

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

Fancyboxがサポートするスライドショーのナビゲーションには、ドットナビゲーションがありません。シンプルなドットナビゲーションを使いたい場合は、APIを使い、JavascriptやCSSを追加します。 カスタマイズ方法は、FancyboxのFAQから引用しました。 ドットナビゲーション設置のイメージはこちら

 <a class="fancybox-dotnavi" href="panorama/01.jpg" rel="dotnavigallery" title="パノラマ風景1"><img src="panorama/01s.jpg" alt="" width=150 height=60 /></a>
 <a class="fancybox-dotnavi" href="panorama/03.jpg" rel="dotnavigallery" title="パノラマ風景2"><img src="panorama/03s.jpg" alt="" width=150 height=60 /></a>
 <a class="fancybox-dotnavi" href="panorama/07.jpg" rel="dotnavigallery" title="パノラマ風景3"><img src="panorama/07s.jpg" alt="" width=150 height=60 /></a>
 <a class="fancybox-dotnavi" href="panorama/08.jpg" rel="dotnavigallery" title="パノラマ風景4"><img src="panorama/08s.jpg" alt="" width=150 height=60 /></a>
 <a class="fancybox-dotnavi" href="panorama/09.jpg" rel="dotnavigallery" title="パノラマ風景5"><img src="panorama/09s.jpg" alt="" width=150 height=60 /></a>
<!-- Javascript dot navigation -->
<script type="text/javascript">
 $(document).ready(function() {

   $(".fancybox-dotnavi").fancybox({
         nextEffect  : 'fade',
         prevEffect  : 'fade',
         padding     : 0,
         margin      : [15, 15, 40, 15],
         afterLoad   : addLinks,
         beforeClose : removeLinks
      });

  function addLinks() {
    var list = $("#links");
    
    if (!list.length) {    
        list = $('<ul id="links">');
    
        for (var i = 0; i < this.group.length; i++) {
            $('<li data-index="' + i + '"><label></label></li>').click(function() { $.fancybox.jumpto( $(this).data('index'));}).appendTo( list );
        }
        
        list.appendTo( 'body' );
     }

    list.find('li').removeClass('active').eq( this.index ).addClass('active');
   }

  function removeLinks() {
    $("#links").remove();    
   }

   });

</script>

<!-- CSS dot navigation -->
<style>

#links {
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding-top: 10px;
    list-style: none;
    text-align: center;
    z-index: 99999;
}

#links li {
    display: inline;
    padding: 0 5px;
}

#links li label {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 0 0 2px rgba(255, 255 ,255 ,1);
    cursor: pointer;
}

#links li.active label {
    background-color: white;
}

</style>

 Fancrbox transitions 遷移アニメーション(まとめ)

Fancyboxのtransitions(遷移アニメーション効果)の基本機能は、elasticとfadeの2つですが、オプションのプラグインには、16種類のメソッドが用意されています。 transitions のプラグインは、Githubサイトからダウンロードします。 transitions のプラグインファイルは、jquery.fancybox.cssとjquery.fancybox.pack.jsです。
インクルードファイルのHTML例は下のとおりです。ボタンヘルパーおよびマムネールヘルパーのファイルは、その機能を使用する時にインクルードします。

インクルードファイル;
<!-- Add jQueryファイル -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.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>

<!--Add Fancybox transitionsプラグインファイル -->
<link rel="stylesheet" href="../source/jquery.fancybox-transitions.css?v=0.1" type="text/css" media="screen" />
<script type="text/javascript" src="../source/jquery.fancybox-transitions.js?v=0.1"></script>

<!-- 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>

Fancrbox transitions 遷移アニメーションのopenMethod および closeMethodの使用法(Javascript);
    $('.fancybox').fancybox({
        openMethod: 'superscaleIn',
        closeMethod: 'superscaleOut'
    });

Fancybox transitionsメソッド一覧 (with both 'In' and 'Out' variants 例:dropIn, dropOut)
 1. Drop in ( 'drop' )
 2. Fade in and scale up ( 'fadescale' )
 3. Slide in from the right ( 'slideright' )
 4. Slide in from the bottom ( 'slidebottom' )
 5. Newspaper (twirl in) ( 'newspaper' )
 6. Fall ( 'fall' )
 7. Fall from the side ( 'sidefall' ) ※fallsideは誤り
 8. Slide from the top ( 'stickyup' )
 9. Horizontal 3D flip ( 'horizontalflip' )
10.Vertical 3D flip ( 'verticalflip' )
11. 3D swinging sign ( 'sign' )
12. Super scaled! ( 'superscale' ) ※superscaledは誤り
13. 3D growing slit ( 'slit' )
14. 3D rotate from bottom ( 'rotatebottom' )
15. 3D rotate from left ( 'rotateleft' )
16. Blur ( 'blur' )

open/closeの遷移アニメーション全16パターン(個別画像):
<a class="fancybox-anime-01s" href="people/girl-pixabay-01.jpg" title="女性1 1. Drop in ( 'drop' )"><img src="people/girl-pixabay-01s.jpg" alt="" width=128 height=80 /></a>
<a class="fancybox-anime-02s" href="people/girl-pixabay-02.jpg" title="女性2 2. Fade in and scale up ( 'fadescale' )"><img src="people/girl-pixabay-02s.jpg" alt="" width=128 height=80 /></a> 
<a class="fancybox-anime-03s" href="people/girl-pixabay-03.jpg" title="女性3 3. Slide in from the right ( 'slideright' )"><img src="people/girl-pixabay-03s.jpg" alt="" width=128 height=80 /></a>
<a class="fancybox-anime-04s" href="people/girl-pixabay-04.jpg" title="女性4 4. Slide in from the bottom ( 'slidebottom' ) "><img src="people/girl-pixabay-04s.jpg" alt="" width=128 height=80 /></a>
<a class="fancybox-anime-05s" href="people/girl-pixabay-05.jpg" title="女性5 5. Newspaper (twirl in) ( 'newspaper' )"><img src="people/girl-pixabay-05s.jpg" alt="" width=128 height=80 /></a>
<a class="fancybox-anime-06s" href="people/girl-pixabay-06.jpg" title="女性6 6. Fall ( 'fall' )"><img src="people/girl-pixabay-06s.jpg" alt="" width=128 height=80 /></a>
(※1.~6.の6枚分のみ掲載)
<script type="text/javascript">
      //transitions オープン、クローズ遷移アニメ 16パターン 
	$(document).ready(function() {
		 $('.fancybox-anime-01s').fancybox({
			  openMethod: 'dropIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'dropOut'
		  });
		 $('.fancybox-anime-02s').fancybox({
			  openMethod: 'fadescaleIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'fadescaleOut'
		  });
		 $('.fancybox-anime-03s').fancybox({
			  openMethod: 'sliderightIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'sliderightOut'
		  });
		 $('.fancybox-anime-04s').fancybox({
			  openMethod: 'slidebottomIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'slidebottomOut'
		  });
		 $('.fancybox-anime-05s').fancybox({
			  openMethod: 'newspaperIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'newspaperOut'
		  });
		 $('.fancybox-anime-06s').fancybox({
			  openMethod: 'fallIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'fallOut'
		  });
		 $('.fancybox-anime-07s').fancybox({
			  openMethod: 'sidefallIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'sidefallOut'
		  });
		 $('.fancybox-anime-08s').fancybox({
			  openMethod: 'stickyupIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'stickyupOut'
		  });
		 $('.fancybox-anime-09s').fancybox({
			  openMethod: 'horizontalflipIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'horizontalflipOut'
		  });
		 $('.fancybox-anime-10s').fancybox({
			  openMethod: 'verticalflipIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'verticalflipOut'
		  });
		 $('.fancybox-anime-11s').fancybox({
			  openMethod: 'signIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'signOut'
		  });
		 $('.fancybox-anime-12s').fancybox({
			  openMethod: 'superscaleIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'superscaleOut'
		  });
		 $('.fancybox-anime-13s').fancybox({
			  openMethod: 'slitIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'slitOut'
		  });
		 $('.fancybox-anime-14s').fancybox({

			  openMethod: 'rotatebottomIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'rotatebottomOut'
		  });
		 $('.fancybox-anime-15s').fancybox({

			  openMethod: 'rotateleftIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'rotateleftOut'
		  });
		 $('.fancybox-anime-16s').fancybox({
			  openMethod: 'blurIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'blurOut'
		  });
		 $('.fancybox-anime-17s').fancybox({
			  openMethod: 'superscaleIn',
			  nextMethod: false,
			  prevMethod:  false,
			  closeMethod: 'superscaleOut'
		  });
	});
</script>


open/close/nest/prevの遷移アニメーション(グループ1):
transitionsは、オープンメソッド/クローズメソッド=newspaper、次へのメソッド=slitを使用
 <a class="fancybox-anime-g1" href="people/girl-pixabay-01.jpg" data-fancybox-group="buttonsgallery" title="女性1"><img src="people/girl-pixabay-01s.jpg" alt="" width=128 /></a>
 <a class="fancybox-anime-g1" href="people/girl-pixabay-02.jpg" data-fancybox-group="buttonsgallery" title="女性2"><img src="people/girl-pixabay-02s.jpg" alt="" width=128 /></a> 
 <a class="fancybox-anime-g1" href="people/girl-pixabay-03.jpg" data-fancybox-group="buttonsgallery" title="女性3"><img src="people/girl-pixabay-03s.jpg" alt="" width=128 /></a>
 <a class="fancybox-anime-g1" href="people/girl-pixabay-06.jpg" data-fancybox-group="buttonsgallery" title="女性4"><img src="people/girl-pixabay-06s.jpg" alt="" width=128 /></a>
 <a class="fancybox-anime-g1" href="people/girl-pixabay-07.jpg" data-fancybox-group="buttonsgallery" title="女性5"><img src="people/girl-pixabay-07s.jpg" alt="" width=128 /></a>
 <a class="fancybox-anime-g1" href="people/girl-pixabay-09.jpg" data-fancybox-group="buttonsgallery" title="女性6"><img src="people/girl-pixabay-09s.jpg" alt="" width=128 /></a>
<script type="text/javascript">
  //transitions オープン、クローズ、次への遷移アニメ(グループ1)
     $(document).ready(function() {
	 $('.fancybox-anime-g1').fancybox({
               autoPlay : true,
               afterLoad : function() {
	            this.title = '' + (this.index + 1) + ' / ' + this.group.length + (this.title ? ' - ' + this.title : '');
		  },

 		openMethod: 'newspaperIn',  //transitions オープンメソッド
		nextMethod: 'slitIn',       //transitions 次へのメソッド
		prevMethod:  false,         //transitions
		closeMethod: 'newspaperOut' //transitions クローズメソッド
	  });

      });
</script>

open/close/nest/prevの遷移アニメーション(グループ2):
transitionsは、オープンメソッド/クローズメソッド=slit、次へのメソッド=newspaperを使用
 <a class="fancybox-anime-g2" href="people/girl-pixabay-01.jpg" data-fancybox-group="buttonsgallery" title="女性1"><img src="people/girl-pixabay-01s.jpg" alt="" width=128 /></a>
 <a class="fancybox-anime-g2" href="people/girl-pixabay-02.jpg" data-fancybox-group="buttonsgallery" title="女性2"><img src="people/girl-pixabay-02s.jpg" alt="" width=128 /></a> 
 <a class="fancybox-anime-g2" href="people/girl-pixabay-03.jpg" data-fancybox-group="buttonsgallery" title="女性3"><img src="people/girl-pixabay-03s.jpg" alt="" width=128 /></a>
 <a class="fancybox-anime-g2" href="people/girl-pixabay-06.jpg" data-fancybox-group="buttonsgallery" title="女性4"><img src="people/girl-pixabay-06s.jpg" alt="" width=128 /></a>
 <a class="fancybox-anime-g2" href="people/girl-pixabay-07.jpg" data-fancybox-group="buttonsgallery" title="女性5"><img src="people/girl-pixabay-07s.jpg" alt="" width=128 /></a>
 <a class="fancybox-anime-g2" href="people/girl-pixabay-09.jpg" data-fancybox-group="buttonsgallery" title="女性6"><img src="people/girl-pixabay-09s.jpg" alt="" width=128 /></a>
<script type="text/javascript">
  //transitions オープン、クローズ、次への遷移アニメ(グループ2)
     $(document).ready(function() {
	 $('.fancybox-anime-g1').fancybox({
               autoPlay : true,
               afterLoad : function() {
	            this.title = '' + (this.index + 1) + ' / ' + this.group.length + (this.title ? ' - ' + this.title : '');
		  },

 		openMethod: 'slitIn',       //transitions オープンメソッド
		nextMethod: 'newspaperIn',  //transitions 次へのメソッド
		prevMethod:  false,         //transitions
		closeMethod: 'slitOut'      //transitions クローズメソッド
	  });

      });
</script>

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(スライダー)非モーダル
動画とは、SWF、FLV、MOV、WMV(*1)  モーダルwindow:画像などメディアの表示は新しい別ウインドー(*2)
  最終更新日:2016.4.26(初版)