fancyBox V2 - Fancy jQuery Lightbox Alternative

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

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

Ⅲ．Fancybox API および transitions

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

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

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

<a id="fancybox-manual-a" href="javascript:;">１枚の画像を開く（a）</a>
<a id="fancybox-manual-b" href="javascript:;">１つのコンテンツを開く - 例：YouTube（b）</a>
<a id="fancybox-manual-c" href="javascript:;">ギャラリーを開く（c）</a>

<script type="text/javascript">
			/*
			 *  Open manually
			 */
                       // １枚の画像を開く（a）コンテンツタイプ省略例（image）
			$("#fancybox-manual-a").click(function() {
				$.fancybox.open('sun/sun-pixabay01.jpg');
			});

                       // １つのコンテンツを開く - 例：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 : '１　SUN' },
 { href : 'sun/sun-pixabay02.jpg', title : '２　SUN' }, 
 { href : 'sun/sun-pixabay03.jpg', title : '３　SUN' },
 { href : 'sun/sun-pixabay04.jpg', title : '４　SUN' },
 { href : 'sun/sun-pixabay05.jpg', title : '５　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」が総数です。

 <a class="fancybox-group1" href="people/girl-pixabay-11.jpg" data-fancybox-group="currentIndexG" title="女性１"><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="女性２"><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="女性３"><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="女性４"><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="女性５"><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="女性６"><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="パノラマ風景１"><img src="panorama/01s.jpg" alt="" width=150 height=60 /></a>
 <a class="fancybox-dotnavi" href="panorama/03.jpg" rel="dotnavigallery" title="パノラマ風景２"><img src="panorama/03s.jpg" alt="" width=150 height=60 /></a>
 <a class="fancybox-dotnavi" href="panorama/07.jpg" rel="dotnavigallery" title="パノラマ風景３"><img src="panorama/07s.jpg" alt="" width=150 height=60 /></a>
 <a class="fancybox-dotnavi" href="panorama/08.jpg" rel="dotnavigallery" title="パノラマ風景４"><img src="panorama/08s.jpg" alt="" width=150 height=60 /></a>
 <a class="fancybox-dotnavi" href="panorama/09.jpg" rel="dotnavigallery" title="パノラマ風景５"><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の２つですが、オプションのプラグインには、１６種類のメソッドが用意されています。 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>

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' )

1 drop
2 fadescale
3 slideright
4 slidebottom
5 newspaper
6 fall

7 sidefall
8 stickyup
9 horizontalflip
10 verticalflip
11 sign
12 superscaled

13 slit
14 rotatebottom
15 rotateleft
16 blur

<a class="fancybox-anime-01s" href="people/girl-pixabay-01.jpg" title="女性１　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. 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. 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. 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. 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. Fall ( 'fall' )"><img src="people/girl-pixabay-06s.jpg" alt="" width=128 height=80 /></a>
(※1.～6.の６枚分のみ掲載）

<script type="text/javascript">
      //transitions オープン、クローズ遷移アニメ １６パターン 
	$(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>

 <a class="fancybox-anime-g1" href="people/girl-pixabay-01.jpg" data-fancybox-group="buttonsgallery" title="女性１"><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="女性２"><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="女性３"><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="女性４"><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="女性５"><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="女性６"><img src="people/girl-pixabay-09s.jpg" alt="" width=128 /></a>

<script type="text/javascript">
  //transitions オープン、クローズ、次への遷移アニメ（グループ１）
     $(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>

 <a class="fancybox-anime-g2" href="people/girl-pixabay-01.jpg" data-fancybox-group="buttonsgallery" title="女性１"><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="女性２"><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="女性３"><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="女性４"><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="女性５"><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="女性６"><img src="people/girl-pixabay-09s.jpg" alt="" width=128 /></a>

<script type="text/javascript">
  //transitions オープン、クローズ、次への遷移アニメ（グループ２）
     $(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>

No	ビューアー	JSフレームワーク	モーダル window*2	画像	動画*1	動画共有サイト動画	Webページ	スライドシュー	備考
1	Lightbox	PrototypeからjQueryに変更（v2.51)	モーダル	●				●
2	Pirobox	jQuery	モーダル	●				●	推奨
3	Videobox	mootools	モーダル			●
4	Mediabox	mootools	モーダル		●	●	●
5	Shadowbox	Prototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、非JSフレームを選択可	モーダル	●	●	●	●	●	推奨
6	Colorbox	jQuery	モーダル	●	●	●	●	●
7	Fotorama	jQuery（スライダー）	非モーダル	●	●	●	●	●

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

Ⅲ．Fancybox API および transitions

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

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

API ドットナビゲーション（dot navigation）

Fancrbox transitions 遷移アニメーション（まとめ）

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