人気のfancyBoxの使い方
How to use fancyBox3 jQuery lightbox script

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

2017年春リリースされたfancyBox3は、旧版fancyBox2に比べ大きくバージョンアップされたようです。

fancyBox3には、おおまかに５つの機能があります。

  1. 個別画像表示（クルックでフルスクリーン表示）
  2. グループ画像表示（ギャラリースライドショー、矢印アローナビ、サムネールナビ、サムネイルナビ表示/非表示切替、フルスクリーン表示など）
  3. 画像以外のバリエーション（Ajax、Iframe、Inlineなど）
  4. ボタンナビおよびサムネイルナビのグループ画像表示（ギャラリースライドショーのバリエーション）
  5. メディア表示（Youtube、Vimeo、Instagram、Google mapsなど）

１ 準備

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

FancyBox3 ZIPファイルについて、FancyboxサイトからDOWNLOAD(fanctBox-master.zip) を、またはGitHubサイトからClone or download → Download Zip（fanctBox-master.zipp)をダウンロードし、解凍します。
解凍結果はつぎのようになります。解凍後、下のdistフォルダ丸ごとサーバーへアップロードします。

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

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

Fancyboxを使用するためには、jQueryファイルとFancyboxのCSSファイル、JSファイルが必要です。 これらのファイルをロードするには、下のHTMLコードのとおり、記述します。
jquery.fancybox.min.js(jquery.fancybox.min.css)はjquery.fancybox.js(jquery.fancybox.css)の圧縮版で、どちらかを使用します。 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="dist/jquery.fancybox.min.css"> <!-- distは任意のフォルダ名 -->
</head>
<body>
	<!-- HTML content -->
        ・・・
	<!-- JS -->
	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <!-- jQuery -->
	<script src="dist/jquery.fancybox.min.js"></script> <!-- distは任意のフォルダ名 -->
</body>
</html>


２ 基本的な使い方

 Fancyboxの基本的な使い方（画像）

Aタグでモーダルウインドウに表示する画像を記述し、IMGタグでサムネール画像を記述します。
Aタグで、data-fancybox属性を定義しfancyboxを使うことを宣言します。 また、Aタグのdata-caption属性でタイトルを記述することができます。
なお、ギャラリー（グループ画像スライドショー）の場合は、data-fancybox属性でユニークなグループ名を定義します。 
●個別画像
<a href="image.jpg" data-fancybox data-caption="My caption"><img src="thumbnail.jpg" alt="" /></a>

●グループ画像(ギャラリー)
<a href="image_1.jpg" data-fancybox="group1" data-caption="Caption 1"><img src="thumbnail_1.jpg" alt="" /></a>
<a href="image_2.jpg" data-fancybox="group1" data-caption="Caption 2"><img src="thumbnail_2.jpg" alt="" /></a>

 Fancyboxオプションの変更（javascript-jQuery）

必要に応じて、jQueryで Fancyboxオプションの変更を行ないます。 
<script type="text/javascript">
	$("[data-fancybox]").fancybox({
		// オプションはここに書きます
	});
</script>

 Fancybox ここまでのHTMLまとめ

HTMLコードおよびキーボード操作

Fancyboxの基本の機能を実現するHTML例を示します。Fancyboxは、モーダル画面の操作をキーボードのキーで行うことができます。 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>fancyBox3の基本的な使い方 - 画像（デモ）</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="dist/jquery.fancybox.min.css"> <!-- distは任意のフォルダ名 -->
</head>
<body>
	<!-- HTML コンテンツ -->
<h2>fancyBox3の基本的な使い方 - 画像（デモ）</h2>
<p>●個別画像</p>
<a href="people/girl-pixabay-03.jpg" data-fancybox data-caption="女性 (c)pixabay.com"><img src="people/girl-pixabay-03s.jpg" alt="" /></a>

<p>●グループ画像(ギャラリー)</p>
<a href="sun/sun-pixabay01.jpg" data-fancybox="group1" data-caption="陽の光１ (c)pixabay.com"><img src="sun/sun-pixabay01s.jpg" alt="" /></a>
<a href="sun/sun-pixabay02.jpg" data-fancybox="group1" data-caption="陽の光２ (c)pixabay.com"><img src="sun/sun-pixabay02s.jpg" alt="" /></a>
</p>
	<!-- JS -->
	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="dist/jquery.fancybox.min.js"></script> <!-- distは任意のフォルダ名 -->
<script type="text/javascript">
	$("[data-fancybox]").fancybox({
		// オプションはここに書きます
	});
</script>

</body>
</html>

fancybox3のモーダル画面レイアウト

サムネール画像などをクリックして、ズームイン表示されたモーダルウィンドウのレイアウトを下に示します。
図 fancybox3モーダル画面レイアウト
（前提 媒体：ノートPC / 画面サイズ：1366x768px / ブラウザ：IE11 / 画像の実際の大きさ：1920x1214px） （説明）

  1. (1)ウィンドウのheight(wh)；651px。ここをクリックするとウィンドウのheght,widthを表示します（新しいページ）。
  2. (2)ウィンドウのwidth(ww)；1,366px。ここをクリックするとウィンドウのheght,widthを表示します。
  3. (3)画像のheight(ih)；ih＝ウィンドウのheight(wh)-画像上下のmargin(5)＝651-44-44＝563px
  4. (4)画像のwidth(iw)；次の関係式から求めます。
    画像の実際のwidth：画像の実際のheight＝画像の画像のwidth(iw)：画像のheight(ih) →
    1920：1214＝画像の画像のwidth(iw)：563 より、画像の画像のwidth(iw)＝1920×563÷1214＝890px
  5. (5)画像の上下のmargin：拡大画像の上下のmargin。デフォルト値は44px。左右は0px。
  6. (6)infobar：左から、矢印(<)ナビ、枚数表示、矢印(>)ナビ。
  7. (7)toolbar：左から、自動スライドショーボタン、フルスクリーンボタン(□)、サムネール表示ボタンおよびクローズボタン(X)。
  8. (8)arrows：矢印ナビゲーションボタン。Previousボタン（左）とNextボタン（右）。

３ fancyBox3がサポートするメディアタイプ

fancyBox3がサポートするメディアタイプは、つぎのとおりです。

 画像（image) - Media types

Aタグでモーダルウインドウに表示する画像を記述し、IMGタグでサムネール画像を記述します。 Aタグで、data-fancybox属性を定義しfancyboxを使うことを宣言します。 また、Aタグのdata-caption属性でタイトルを記述することができます。 なお、ギャラリー（グループ画像スライドショー）の場合は、data-fancybox属性でユニークなグループ名を定義します。

画像（image)の標準的な使い方３つ

画像（image)の標準的な使い方は、(1)個別の画像、(2)グループの画像でギャラリー および (3)１枚の画像を見せてギャラリーがあります。 下のタブメニュー（HTML,Javascript,CSS）は、いずれかを選択するまで自動スライドします。 

<h2>fancyBox3 画像の標準的な使い方３つ（デモ）</h2>
<p>(1) 個別画像</p>
<a href="people/girl-pixabay-03L.jpg" data-fancybox data-caption="女性 (c)pixabay.com">
     <img src="people/girl-pixabay-03s.jpg" alt="" width="150" /></a>

<p>(2) グループ画像(ギャラリー)</p>
<a href="sun/sun-pixabay01L.jpg" data-fancybox="group1" data-caption="陽の光１ (c)pixabay.com">
     <img src="sun/sun-pixabay01s.jpg" alt="" width="150" /></a>
<a href="sun/sun-pixabay02L.jpg" data-fancybox="group1" data-caption="陽の光２ (c)pixabay.com">
     <img src="sun/sun-pixabay02s.jpg" alt="" width="150" /></a>
<a href="sun/sun-pixabay03.jpg" data-fancybox="group1" data-caption="陽の光３ (c)pixabay.com">
     <img src="sun/sun-pixabay03s.jpg" alt="" width="150" /></a>
<a href="sun/sun-pixabay04.jpg" data-fancybox="group1" data-caption="陽の光４ (c)pixabay.com">
     <img src="sun/sun-pixabay04s.jpg" alt="" width="150" /></a>
<a href="sun/sun-pixabay05.jpg" data-fancybox="group1" data-caption="陽の光５ (c)pixabay.com">
     <img src="sun/sun-pixabay05s.jpg" alt="" width="150" /></a>

<h3>(3) １枚の写真を見せてギャラリー</h3>
<p>
    <a href="../images/sagamihara-park/P4280327.jpg" data-fancybox="images-single">
      <img src="../images/sagamihara-park/P4280327-cover.jpg" />
    </a>
</p>

<div style="display: none;"> <!-- 隠す写真 -->
  <a href="../images/sagamihara-park/P4280328.jpg" data-fancybox="images-single"
     data-thumb="../images/sagamihara-park/P4280328s.jpg"></a>
  <a href="../images/sagamihara-park/P4280329.jpg" data-fancybox="images-single"
     data-thumb="../images/sagamihara-park/P4280329s.jpg"></a>
  <a href="../images/sagamihara-park/P4280331.jpg" data-fancybox="images-single"
     data-thumb="../images/sagamihara-park/P4280331s.jpg"></a>
  <a href="../images/sagamihara-park/P4280334.jpg" data-fancybox="images-single"
     data-thumb="../images/sagamihara-park/P4280334s.jpg"></a>
</div>

画像のコピー禁止（右クリック抑止）およびキーボード操作抑止（オプション）

拡大表示された画像をコピーさせたくない場合は、fancybxオプションのprotectを true に設定します。 また、キーボードのキー操作による画面制御を禁止する場合は、オプションのkeyboardを false に設定します。 

$('[data-fancybox]').fancybox({
  // オプションはここに書きます
  protect: true     //右クリック抑止
  keyboard : false  //キーボード操作抑止
});

$('[data-fancybox="watermrk"]').fancybox({
  protect    : true,
  slideClass : 'watermark'	// Custom CSS class for slide element
});

// 透かしマーク Preload watermark image Please, use your own image
(new Image()).src = "http://fancyapps.com/GJbkSPU.png";

図表のキャプション（<figcaption>タグ）応用例（captionカスタマイズ）

HTML5から追加の<figcaption>タグにより、図表にキャプションを付けることができますが、このキャプションをdata-captionのキャプションに使用できます。 

$( '[data-fancybox]' ).fancybox({

  caption : function( instance, item ) {
     return ($(this).find('figcaption').html()); 
    }

});

 Inline HTML - Media types

インラインコンテンツ(inline)は、HTML内部に隠れたエレメントとしてDIVタグで生成します。 インラインコンテンツのID名は、Aタグのdata-src属性で定義した#ID名とリンクを取ります。 インラインコンテンツには、コンテンツのオープン／クローズなどの仕方に４つのバリエーションがあります。

(1) デフォルト
(2) CSS使用により、オープン/クローズ アニメーション
(3) オプションのカスタマイズにより、ツールバーを表示
(4) オプションのカスタマイズにより、モーダルウインドウに表示 
/* コンテンツ b アニメーション */
#hidden-content-b {
  /* Custom styling */
  max-width: 550px;
  border-radius: 4px;

  /* Custom transition - slide from top*/
  transform: translateY(-50px);
  transition: all .33s;
}

.fancybox-slide--current #hidden-content-b {
  transform: translateY(0);
}

 Ajaxコンテンツ - Media types

Ajaxコンテンツをロードする場合は、Aタグに data-type="ajax"属性を追加し、コンテンツのURLは data-src属性で指定します。
また、コンテンツ内の特定のエレメントをロードしたい場合は、data-filter属性にフィルター（#ID名）を指定します。 なお、フィルターは、data-src属性に付加することもできます。 

<h2>fancyBox v3.1 - Ajax コンテンツ Filter ajax content</h2>

<h4>(1) デフォルト例</h4>
<a style="margin-left:15px" data-fancybox data-type="ajax" data-src="http://urbanqee.com/webutil/photo/fancybox3/fancybox31-Keyboard.html" href="javascript:;" class="btn">Demo</a>

<h4>(2) コンテンツにフィルターを使った２つの方法</h4>
<p style="margin-left:15px">
  <a data-fancybox data-type="ajax" data-src="http://urbanqee.com/webutil/photo/fancybox3/fancybox31-Keyboard.html" data-filter="#Keyboard2" href="javascript:;">
1) "data-filter"属性で使う - Demo</a>
</p>
<p style="margin-left:15px">  
  <a data-fancybox data-type="ajax" data-src="http://urbanqee.com/webutil/photo/fancybox3/fancybox31-Keyboard.html #Keyboard2" href="javascript:;">
2) "data-src"属性に付加して使う - Demo</a>
</p>

<p>
 （参考）Ajax コンテンツのソースコード - fancybox31-Ajax-content.html；
</p>

 iframeコンテンツ - Media types

Aタグのdata-type="iframe"属性を指定し、data-src属性にWebページを指定することにより、Webページがiframeに表示されます。 ただし、iframe内のプレースメントがそのページのスクリプトまたはセキュリティ設定によってブロックされている場合は、fancyBoxで表示でません。 また、WebページがPDFファイルの場合、IEでは表示できません。もし、IEで表示したい場合は、PDF.jsをインストール必要があります。 PDF.jsのインストールと使い方はこちらを参照してください。
iframe領域の大きさなどは、CSSまたはjavascriptで変更することができます。 

<h2>fancyBox v3.1 - Iframeコンテンツ（デモ）</h2>

<p>
  <a data-fancybox data-type="iframe" data-src="fancybox3-socialbutton-demo.html" href="javascript:;">
    ≫ ウェブ ページ１ - Demo
  </a>
</p>

<p>
  <a data-fancybox data-type="iframe" data-src="https://www.yahoo.co.jp/" href="javascript:;">
    ≫ ウェブ ページ２（フレーム内での表示を許可しないWeb サイトの例） - Demo
  </a>
</p>

<p>
  <a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" href="javascript:;">
     ≫ PDF ファイル - Demo （IE 表示不可）
  </a>
</p>
<p>
  <a data-fancybox data-type="iframe" data-src="http://urbanqee.com/webutil/pdfjs/web/viewer.html?file=http://urbanqee.com/webutil/photo/fancybox3/img/12_hou.pdf" href="javascript:;">
     ≫ PDF ファイル - Demo （IE 表示可 pdf.jsをインストール）
  </a>
</p>

 ４ 埋め込みコンテンツ YouTube, Vimeo, Google Maps および Instgram - Embedding

プロバイダー YouTube, Vimeo, Google Maps および InstgramのメディアページのURLから、埋め込みコンテンツを表示します。 URLは、Aタグのhref属性に指定します。

 YouTube, Vimeo, Google Maps および Instgram の埋め込み方

Instgramのデモでは、data-caption属性（キャプション）にHTMLタグを使い、ポインターリンクを設定しています（captionカスタマイズ例）。 

<h2>fancyBox v3.1 - 埋め込みコンテンツ YouTube, Vimeo, Google Maps および Instgram デフォルト - Embedding（デモ）</h2>

<ul>
  <li>
    <a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">≫ YouTube video - Demo</a>
  </li>
  <li>
    <a data-fancybox href="https://vimeo.com/191947042">≫ Vimeo video - Demo</a>
  </li>
  <li>
    <a data-fancybox href="https://www.google.co.jp/maps/@35.68242,139.747996,13z" 
       data-caption="東京・千代田区">≫ Google Maps - Demo</a>
  </li>
  <li>
    <a data-fancybox href="https://www.instagram.com/p/BLsmvjijjNf/?taken-by=jamesrelfdyer" 
       data-caption="<span>ベッキー姉妹 <a href='https://www.instagram.com/becky_dayo/' target='_blank'>@becky_dayo</a></span>">
      ≫ Instagram photo - Demo</a>
  </li>

 動画領域サイズのカスタマイズ（CSS) - Video dimensions

動画の埋め込みプレーヤーの領域サイズをCSSでカスタマイズします。 

.fancybox-slide--video .fancybox-content {
	width  : 533px;
	height : 300px;
	max-width  : 80%;
	max-height : 80%;
        margin: 0;
}

 動画URLのパラメータによる動画制御 - Video parameters

動画URLのパラメータ（下HTML例で青字コード）を指定することにより、動画を制御することができます。 

<h2>fancyBox - YouTube, Vimeo 動画URLパラメータによる動作の制御  - Video parameters（デモ）</h2>

<ul>
  <li>
    <a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1&rel=0&controls=1&showinfo=0&start=10">
      YouTube video - hide controls and info</a>
  </li>
  <li>
    <a data-fancybox href="https://vimeo.com/191947042?color=f00&autoplay=false">
      Vimeo video - custom color</a>
  </li>
</ul>

５ fancyBox v3.1 オプション/API カスタマイズ例 - option

javascriptで、fancyboxオプションの変更およびAPIを使ってfancyboxのカスタマイズを行います。

  画像遷移 next/previous スライドアニメーション効果のバリエーション - (option - transitionEffect)

スライドショーのとき、画像遷移アニメーション効果(transitionEffect)には、指定可能な値が７つあります。それらは、false（disable）, 'fade', 'slide', 'circular', 'tube', "zoom-in-out' および 'rotate' があります。 

$("[data-fancybox]").fancybox({
         infobar: true,
         transitionEffect : false
	 //   false  - disable(無効）
	 //   'fade'
	 //   'slide'
	 //   'circular'
	 //   'tube'
	 //   'zoom-in-out'
	 //   'rotate'
});

それぞれの効果のデモ(transitionEffect demo)を新しいページで見る：  false｜ fade｜ slide｜ circular｜ tube｜ zoom-in-out｜ rotate 

 モーダル画面のツールバーなど各種ボタンの表示/非表示 - (option)

モーダル画面に表示されるツールバーなどのボタンは大きく分けると、３つあります。 それらは、モーダル画面レイアウトに示すように、option名称の infobar, toolbar および arrowsで示すボタン類です。 なお、option infobarは、デフォルトが非表示設定（false）です。 

 $("[data-fancybox]").fancybox({
         //ツールバーなどすべてのボタン類の表示例
           infobar : true,
         //toolbar : true,
         //arrows : true
  });

 captionエリアのカスタマイズ１ - 画像ダウンロードリンク - (API)

captionエリアに、画像ダウンロードリンクを設定するcaptionのカスタマイズ例です。 

$( '[data-fancybox]' ).fancybox({
  protect: true,            // 右クリック禁止
  caption : function( instance, item ) {
    var caption, link;

    if ( item.type === 'image' ) {
      caption = $(this).data('caption');
      link    = '<a href="' + item.src + '" target="_blank">この画像をダウンロード</a>';

      return (caption ? caption + '<br />' : '') + link;
    }

  }
});

 captionエリアのカスタマイズ - ソーシャルボタンの設置 - (API)

前項の「captionエリアのカスタマイズ - 画像リンク設定」と同じ方法で、ソーシャルボタンを設置します。 ここで設置しているソーシャルボタンは、Twitter, Facebook, LINE, Ggoogle, Hatena, Pocket, mixi, Tumblr, GREE, Ameba, Pinterest, および Evernote の１２SNSサイトです。Twitter, Facebookは、公式ボタンと非公式ボタンの両方を、他のサイトは非公式ボタンで設置しています。 非公式ボタンとは、オリジナルデザイン画像のボタンを言います。いずれにしても、公式サイトに行くことなしにソーシャルボタンを設定できます。
下javascriptコードにおいて、青字の部分は表示したいボタンについて、使用者が定義する箇所です。 

 $( '[data-fancybox]' ).fancybox({
        thumbs : {
            showOnStart : true
          },
	caption : function( instance, item ) {
 		var caption, link; var button;
	     if ( item.type === 'image' ) {
		caption = $(this).data('caption');
                link = '<DIV class="SNS">';
                //共有するURLについて；画像のURLを共有するときは this.href 、そのページのURLを共有するときは document.URL とする
                //* Add tweet button 公式ボタン
                link += '<div><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + encodeURIComponent(this.href) + '" title="Twitter">Tweet</a></div>';
                //* Add FaceBook like button 公式ボタン
                //link += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
                link += '<div class="fb-like" data-href="' + document.URL + '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false">Facebook</div>';
                // twitter shere 
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/Twitter.png" width=32 height=32 title="このページの情報を Facebook で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'http://twitter.com/share?url=' + encodeURIComponent(document.URL) + "&text=" + encodeURIComponent($('title').html()) + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // Add FaceBook share button
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/Facebook.png" width=32 height=32 title="このページの情報を Facebook で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'http://www.facebook.com/sharer.php?u=' + this.href + '&t=' + $('title').html() + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // LINE it! LINEに送る  （注）client_id=1341209950&state=1409338029 要事前確認
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/line-share-d.png" width=32 height=32 title="このページの情報を LINE に送る" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id=1341209950&state=1409338029&redirect_uri=https%3A%2F%2Ftimeline.line.me%2Fauth%3FreturnUrl%3Dhttps%253A%252F%252Ftimeline.line.me%252Fsocial-plugin%252Fshare%253Furl%253D' + encodeURIComponent(encodeURIComponent(this.href)) + '&t=' + encodeURIComponent(encodeURIComponent($('title').html())) + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // google+1 
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/google_plus.png" width=32 height=32 title="このページの情報を Google+ で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'https://plus.google.com/share?url=' + encodeURIComponent(this.href) + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // hatena はてなブックマーク
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/hatena-bookmark.png" width=32 height=32 title="このページの情報を はてなブックマーク に追加する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'http://b.hatena.ne.jp/add?mode=confirm&url=' + encodeURIComponent(this.href) + "&title=" + encodeURIComponent($('title').html()) + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // pocket ポケット
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/getpocket.png" width=32 height=32 title="このページの情報を pocket で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'http://getpocket.com/edit?url=' + encodeURIComponent(this.href) + "&title=" + encodeURIComponent($('title').html()) + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // mixiチェック - (7) （注２）k=mixiチェックキー (キーは事前登録）
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/mixi-check.gif" width=32 height=32 title="このページの情報を mixi check で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'https://mixi.jp/share.pl?mode=login&u=' + encodeURIComponent(this.href) + "&k=" + "mixi1234567890" + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // tumblr-post
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/tumblr-logo-whiteonblue-512.png" width=32 height=32 title="このページの情報を Tumblr で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3Fposttype%3Dlink%26title%3D' + encodeURIComponent(encodeURIComponent($('title').html())) + "%26content%3D" + encodeURIComponent(encodeURIComponent(this.href)) + "%26canonicalUrl%3D" + encodeURIComponent(encodeURIComponent(this.href)) + "%26shareSource%3Dtumblr_share_button%26_format%3Dhtml" + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // GREE-share
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/gree-btn_logo_32.png" width=32 height=32 title="このページの情報を GREE で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'https://pid.gree.net/login/entry?ignore_sso=1&backto=http%3A%2F%2Fgree.jp%2F%3Fmode%3Dshare%26act%3Dwrite%26url%3D' + encodeURIComponent(this.href) + "%26button_type%3D3%26button_size%3D20&campaign_code=" + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                //Amebaブログ post
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/ameba-icon_app.png" width=32 height=32 title="このページの情報を Amebaブログ で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text=' + encodeURIComponent($('title').html()) + "<br>" + encodeURIComponent(document.URL) + "&editor_flg=1" + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                //pinterest 
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/pinterest3.png" width=32 height=32 title="このページの情報を Pinterest で共有する" style="cursor: pointer"';
                link += ' onclick="window.open(\'https://jp.pinterest.com/join/?next=/pin/create/button/%3Furl%3D' + encodeURIComponent(encodeURIComponent(this.href)) + "%26description%3D" + encodeURIComponent(encodeURIComponent($('title').html())) + "%26media%3D" + encodeURIComponent(encodeURIComponent('http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg')) + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                //Evernote clip(15)
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/evernote.png" width=32 height=32 title="このページの情報を Evernote で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'https://www.evernote.com/clip.action?url=' + encodeURIComponent(this.href) + '&title=' + encodeURIComponent($('title').html()) + '\',' + '\'social_window\',\'width=700,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                link += '</DIV>'; 
			return (caption ? caption + '<br />' : '') + link;
        	}
               else{
                link = '<DIV class="SNS">';
                //共有するURLについて；画像のURLを共有するときは this.href 、そのページのURLを共有するときは document.URL とする
                //* Add tweet button 公式ボタン
                link += '<div><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + encodeURIComponent(this.href) + '" title="Twitter">Tweet</a></div>';
                //* Add FaceBook like button 公式ボタン
                //link += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
                link += '<div class="fb-like" data-href="' + document.URL + '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>';
                // twitter shere 
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/Twitter.png" width=32 height=32 title="このページの情報を Facebook で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'http://twitter.com/share?url=' + encodeURIComponent(document.URL) + "&text=" + encodeURIComponent($('title').html()) + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // Add FaceBook share button
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/Facebook.png" width=32 height=32 title="このページの情報を Facebook で共有する" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'http://www.facebook.com/sharer.php?u=' + this.href + '&t=' + $('title').html() + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                // LINE it! LINEに送る  （注）client_id=1341209950&state=1409338029 要事前確認
                link += '<img src="http://urbanqee.com/webutil/photo/lightbox290/images/line-share-d.png" width=32 height=32 title="このページの情報を LINE に送る" style="cursor: pointer;margin-right:5px;"';
                link += ' onclick="window.open(\'https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id=1341209950&state=1409338029&redirect_uri=https%3A%2F%2Ftimeline.line.me%2Fauth%3FreturnUrl%3Dhttps%253A%252F%252Ftimeline.line.me%252Fsocial-plugin%252Fshare%253Furl%253D' + encodeURIComponent(encodeURIComponent(this.href)) + '&t=' + encodeURIComponent(encodeURIComponent($('title').html())) + '\',' + '\'social_window\',\'width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes\')">';
                link += '</DIV>';               
                return ($(this).find('figcaption').html()) + link;
               }

	},

afterShow: function( instance, slide ) { //v3.2.0

  //twttr.widgets.load(); // 公式ボタン用
  if (typeof twttr === 'undefined') {
    var twitterjs = document.createElement("script");
    twitterjs.async = true;
    twitterjs.src = '//platform.twitter.com/widgets.js';
    document.getElementsByTagName('body')[0].appendChild(twitterjs);
  }
  else {
    twttr.widgets.load();
  }

  // Facebook  // 公式ボタン用
  if(typeof FB === 'undefined'){
    $('body').append('<div id="fb-root"></div>');
    var fbjs = document.createElement('script');
    fbjs.id = 'facebook-jssdk';
    fbjs.src = '//connect.facebook.net/ja_JP/all.js#xfbml=1&appId={Facebook App ID}';
    document.getElementsByTagName('body')[0].appendChild(fbjs);
  }else{
    FB.XFBML.parse();
  }

        }
});

 Aタグdata-caption属性によるcaptionのカスタマイズ２ - 外部サイトへのポインターリンクの設置（HTMLタグ）

個々のコンテンツのタイトル（キャプション）を設定するAタグのdata-captionには、HTMLタグが書けるので、テキストのタイトルの他に、画像や外部サイトへのポインターリンクなど の設置ができます。 

<h2>fancyBox v3.1 - Aタグdata-caption属性によるcaptionのカスタマイズ - 画像、ポインターリンク設定（デモ）</h2>

<ul>
  <li>
    <a data-fancybox="insta" href="https://www.instagram.com/p/BLsmvjijjNf/?taken-by=jamesrelfdyer" 
      data-caption="<span><img src='img/instagram-w32.png'> ベッキー姉妹 <a href='https://www.instagram.com/becky_dayo/' target='_blank'>@becky_dayo</a></span>">
      Instagram photo - Becky</a>
  </li>
  <li>
    <a data-fancybox="insta" href="https://www.instagram.com/p/BU0d7qZFcwz/?taken-by=rolaofficial" data-caption="<span><img src='img/instagram-w32.png'> ローラ <a href='https://www.instagram.com/rolaofficial/' target='_blank'>@rolaofficial</a></span>">
      Instagram photo - Rola</a>
  </li>
</ul>

 サムネール画像を画面の下に配置 - （API/CSS）

サムネール画像は、画面右のtoolbarエリアに通常は表示されますが、これは画面の下に配置したい場合のカスタマイズ例です。 

@media all and (min-width: 800px) {

  .fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right : 0;
    height: 95px;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
  }
  
  .fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
  }

}

 captionエリアのカスタマイズ３ - 画像枚数表示（何枚/何枚中）- (API)

画像などの枚数表示（何枚/何枚中）をcaptionエリアエリア内に表示します。 

$( '[data-fancybox]' ).fancybox({

  caption : function( instance, item ) {
    var captions = $(this).data('caption') || '';
    
    return '(<span data-fancybox-index></span>/<span data-fancybox-count></span>) ' + ( captions.length ? ' ' + captions : '' );
  }
});

 captionエリアのカスタマイズ４ - captionエリア表示制御 - (option/CSS)

captionエリアの表示は、画面からマウスが離れるとその表示が消えます。また、マウスオーバするとcaptionエリアが表示されます。 captionエリアを常に表示するときは、オプションidleTimeを使います。 また、captionエリアは、そのエリアのtopに白い１pxのボーダーラインが付いています。このボーダーラインを消したいときは、CSSを使いクラス名fancybox-captionで制御します。 

$( '[data-fancybox]' ).fancybox({
  idleTime: false,  // captionエリア false:常に表示 true:画面マウスアウトで非表示／マウスオーバーで表示

  caption : function( instance, item ) {
    var captions = $(this).data('caption') || '';    
    return '(<span data-fancybox-index></span>/<span data-fancybox-count></span>) ' + ( captions.length ? ' ' + captions : '' );
  }
});

１ 準備｜２ 基本的な使い方｜３ サポートメディアタイプ ｜４ 埋め込みコンテンツ｜５ option/API カスタマイズ例｜TOPへ



fancybox関連リンク

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.6.18(初版）- 2017.6.25
アクセス解析