人気のjQuery fancyBox v2
fancyBoxは、画像など多くのコンテンツのビューアとして人気のあるjQuery系のLightboxです。
fancyBoxには、おおまかに５つの機能があります。
個別画像表示 グループ画像表示（ギャラリースライドショー 矢印アローアイコンナビ）
画像以外のバリエーション（Ajax、Iframe、Inline、SWF、Youtube (iframe)、 Google maps (iframe) など）
ボタンナビおよびナムネールナビのグループ画像表示（ギャラリースライドショーのバリエーション）
メディア表示（Youtube、Vimeo、Metacafe、Dailymotion、Twitvid、Twitpic、Instagram、Google mapsなど）
1.、2.、3.は、fancyboxメインの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 フォルダを丸ごとサーバーへアップロードします。demo フォルダもサーバーへアップロードします。demo フォルダ内にアップロードしています。
fancyapps-fancyBox-v2.1.5-0-ge2248f4.zipの解凍後 上、sourceフォルダの内容
※jquery.fancybox.pack.jsはjquery.fancybox.jsの圧縮版、どちらかを使用します。
まお、ダウンロードをしたくない場合は、CDNJSサイトのFancyboxファイルを使用します。
Fancyboxファイルのインクルード方法（HTML)
Fancyboxを使用するためには、jQueryファイルとFancyboxのCSSファイル、JSファイルが必要です。
これらのファイルをロードするには、SCRIPTタグやLINKタグで<HEAD>内に記述します。
下のHTML例の「必須」ファイルを使用すれば、Fancyboxの基本の機能を実現することができます。必要に応じ「オプション」ファイルを追加します。
<!-- 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="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ウィンドーのイメージはつぎのとおりです。padding は、Fancyboxウィンドー内のコンテンツの周りの余白の長さで、デフォルト値は15px。 margin は、Fancyboxウィンドーとビューポートの最小の余白の長さで、デフォルト値は20px。 box-shadow は、Fancyboxウィンドーのボックスの周りに影を生成しています。
Ⅰ．fancyBox メイン基本機能
ここのベーシック機能のデモでは、1.個別画像表示 2.グループ画像表示（ギャラリースライドショー 矢印アローアイコンナビ）3.画像以外のバリエーション（Ajax、Iframe、Inline、SWF、Youtube (iframe)、 Google maps (iframe) など）
を行っています。
<!-- 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" />
シンプルな個別画像（３枚）
JavascriptのFancybox設定で定義したクラスセレクタ名を画像をリンクするAタグのClass名に使用します。
デモ（シンプルな個別画像）
HTML
Javascript
<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属性でタイトルを記述できます。
デモ（シンプルな画像ギャラリー）
HTML
Javascript
<a class="fancybox" href="mume/P2270046.jpg" data-fancybox-group="gallery" title="ウメ１ 羽根木公園">
<img src="mume/P2270046s.jpg" alt="" width=140 /></a>
<a class="fancybox" href="mume/P2270047.jpg" data-fancybox-group="gallery" title="ウメ２ 羽根木公園">
<img src="mume/P2270047s.jpg" alt="" width=140 /></a>
<a class="fancybox" href="mume/P2270061.jpg" data-fancybox-group="gallery" title="ウメ３ 羽根木公園">
<img src="mume/P2270061s.jpg" alt="" width=140 /></a>
<a class="fancybox" href="mume/P2270067.jpg" data-fancybox-group="gallery" title="ウメ４ 羽根木公園">
<img src="mume/P2270067s.jpg" alt="" width=140 /></a>
<a class="fancybox" href="mume/P2270059.jpg" data-fancybox-group="gallery" title="ウメ５ 羽根木公園">
<img src="mume/P2270059s.jpg" alt="" width=140 /></a>
<script type="text/javascript">
$(document).ready(function() {
/* シンプル個別画像用設定とシンプルグループ画像設定 */
$(".fancybox").fancybox();
});
</script>
効果、open、closeの４つのバリエーションとデフォルト（個別画像５枚）
効果などのオプションの設定により、Fancyboxの表示にバリエーションをつけることができまます。
ここのデモは、５枚の画像で５つのバリエーションを比較して見ることができます。デモのオプションなどの設定値は下表参照。
１枚目（左から）：Fancyboxウィンドーを開く（閉じる）ときのアニメーションはfadeで、ゆっくり表示されます。
また、タイトルは、Fancyboxウィンドーの左下の外に白字（背景透過）で表示します。画像などコンテンツの上をクリックしてFancyboxウィンドーを閉じることはできません。
２枚目：Fancyboxウィンドーを開く（閉じる）動作を無効にして、いきなり表示されます。
また、タイトルは、Fancyboxウィンドーのコンテンツ上の左下に白字（背景黒）で表示します。画像などコンテンツの上をクリックしてFancyboxウィンドーを閉じることはできません。
３枚目：Fancyboxウィンドーを開く動作を無効にして、いきなり表示されます。Fancyboxウィンドーを閉じるときのアニメーションはfadeで、閉じる時間は250ms(デフォルト）です。
Fancyboxウィンドーの背景をデフォルトより、明るくしています(rgba(0,0,255,0.3))。Fancyboxウィンドーの影を、三隅（デフォルト：左右、下）から四隅（左右、上下）に変えています。
画像などコンテンツの上をクリックしてFancyboxウィンドーを閉じることができます。タイトルは、Fancyboxウィンドーのコンテンツの外れた左下に黒字（背景透過）で表示します。
４枚目：Fancyboxウィンドーを開く（閉じる）ときのアニメーションはelasticで、Fancyboxを開くときはゆっくりと、閉じるときは素早く動作します。
タイトルは、Fancyboxウィンドーの下中央の外に白字（背景黒）で表示します。
Fancyboxウィンドーのオーバーレイを無効(null設定)にしています。表示のコンテンツの周りの余白はありません（paddingゼロ）。
５枚目：オプションは何も設定していません。すべてデフォルト値です。
Fancyboxオプションなどの設定
openEffect closeEffect openSpeed closeSpeed helper helper closeClick padding 備考 １枚目
fade fade 1000 250 outside speedOut:1000 false 20 ２枚目
none none 無効 無効 over 未定義 false 20 ３枚目
none fade 無効 250 inside css-'background' : true 20 ※1 ４枚目
elastic elastic 500 150 float null true 0 ５枚目
fade fade 250 250 float 未定義 false 20 注 記
※1：CSS box-shadow のカスタマイズあり。こちら を参照）。
デモ（open、close効果）
HTML
Javascript と CSS
<a class="fancybox-effects-a" href="bird/pixabay12-960x640.jpg" title="１ 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="２ 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="３ 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="４ 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のオプションの設定により、画像遷移のアニメーションにバリエーションをつけることができまます。
グループ１；ギャラリーのスライドの画像の遷移の方法（nextEffect/prevEffect）は、次へ（next）のときはelastic、前へ（prev）のときはfadeとして、そのアニメーション動作をゆっくりとしています（nextSpeed/prevSpeed）。
グループ２；オプションは何も設定していません。すべてデフォルト値です。
Fancyboxオプションの設定
openEffect / nextEffect prevEffect openSpeed / nextSpeed prevSpeed helper autoPlay / afterLoad ｸﾞﾙｰﾌﾟ1
fade fade elastic 250 500 500 outside true / カレント ｸﾞﾙｰﾌﾟ2
fade elastic elastic 250 250 250 float false / 未設定
デモ（next,prev効果）
HTML
Javascript
<!-- グループ１ -->
<a class="fancybox-group1" rel="group1" href="sun/sun-pixabay01.jpg" title="１ SUN"><img src="sun/sun-pixabay01s.jpg" alt="" width=140 /></a>
<a class="fancybox-group1" rel="group1" href="sun/sun-pixabay02.jpg" title="２ SUN"><img src="sun/sun-pixabay02s.jpg" alt="" width=140 /></a>
<a class="fancybox-group1" rel="group1" href="sun/sun-pixabay03.jpg" title="３ SUN"><img src="sun/sun-pixabay03s.jpg" alt="" width=140 /></a>
<a class="fancybox-group1" rel="group1" href="sun/sun-pixabay04.jpg" title="４ SUN"><img src="sun/sun-pixabay04s.jpg" alt="" width=140 /></a>
<a class="fancybox-group1" rel="group1" href="sun/sun-pixabay05.jpg" title="５ SUN"><img src="sun/sun-pixabay05s.jpg" alt="" width=140 /></a>
<!-- グループ２ デフォルト -->
<a class="fancybox" rel="group2" href="sun/sun-pixabay01.jpg" title="１ SUN"><img src="sun/sun-pixabay01s.jpg" alt="" width=140 /></a>
<a class="fancybox" rel="group2" href="sun/sun-pixabay02.jpg" title="２ SUN"><img src="sun/sun-pixabay02s.jpg" alt="" width=140 /></a>
<a class="fancybox" rel="group2" href="sun/sun-pixabay03.jpg" title="３ SUN"><img src="sun/sun-pixabay03s.jpg" alt="" width=140 /></a>
<a class="fancybox" rel="group2" href="sun/sun-pixabay04.jpg" title="４ SUN"><img src="sun/sun-pixabay04s.jpg" alt="" width=140 /></a>
<a class="fancybox" rel="group2" href="sun/sun-pixabay05.jpg" title="５ SUN"><img src="sun/sun-pixabay05s.jpg" alt="" width=140 /></a>
</ul>
<script type="text/javascript">
$(document).ready(function() {
// デフォルト設定 グループ２
$(".fancybox").fancybox();
// ベーシック機能グループ設定 グループ１
$(".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'です。
デモ（基本メディアコンテンツ）
HTML
Javascript
<ul>
<li><a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay01.jpg" title="ギャラリー １ SUN">太陽の光ギャラリー（画像グループ）</a>
<a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay02.jpg" title="２ SUN"></a>
<a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay03.jpg" title="３ SUN"></a>
<a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay04.jpg" title="４ SUN"></a>
<a class="various fancybox.image" rel="variousgroup1" href="sun/sun-pixabay05.jpg" title="５ 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><!---ウェブサイトＨＴＭＬ-->
<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.xxxxx のxxxxx はコンテンツタイプ）
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox(); // デフォルト設定
});
</script>
キーボードによるFancyboxの操作
Fancyboxのギャラリーをキーボードのボタンにより操作できます。
キーボード
※関連するキーについて、青色、緑色、黄色でマークしています。２つあるキーは、色でマークしていない方も使用できます。
キーボード操作説明
機能名（Fancybox) キー名（キーボード） 動作機能 備考 next Enter 今の画像を左へ移動し、次の画像を表示（アニメーション動作） Page Down 今の画像を上へ移動し、次の画像を表示（アニメーション動作） → 今の画像を左へ移動し、次の画像を表示（アニメーション動作） ↓ 今の画像を上へ移動し、次の画像を表示（アニメーション動作） prev Backspace 今の画像を右へ移動し、前の画像を表示（アニメーション動作） Page Up 今の画像を下へ移動し、前の画像を表示（アニメーション動作） ← 今の画像を右へ移動し、前の画像を表示（アニメーション動作） ↑ 今の画像を下へ移動し、前の画像を表示（アニメーション動作） close Esc Fancyboxをクローズ start/stop space スライドショーをスタート、ストップ fullscreen F 画像を拡大／元に戻す（トグル）
※機能名（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の各ボタン）
このデモ（ボタンナビ）は、オープン、クローズ、次へ、前への画像遷移のアニメーション効果について無効にしています。
デモ（ボタンナビ）
HTML
Javascript;
<a class="fancybox-buttons" href="people/girl-pixabay-01.jpg" data-fancybox-group="buttonsgallery" title="女性１"><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="女性２"><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="女性３"><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="女性４"><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="女性５"><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アローアイコンは表示）。
デモ（サムネールナビ）
HTML
Javascript
<a class="fancybox-thumbs" href="people/girl-pixabay-01.jpg" data-fancybox-group="thumbsgallery" title="女性１"><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="女性２"><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="女性３"><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="女性４"><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="女性５"><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>
ボタンタイプ＋サムネールタイプのコラボスライドショー
スライドショーには、アローアイコン（基本機能）タイプ、ボタンタイプとサムネールタイプの３つのナビゲーションタイプがあります。
３つのタイプのスライドショーをコラボしてみました。ボタンヘルパー とサムネールヘルパー の両方のJS、CSSファイルのインクルードを忘れずに。
デモ（ボタンナビ＋サムネールナビ））
HTML
Javascript
<a class="fancybox-thumbsbuttons" data-fancybox-group="three-navi" href="flower/natur009.jpg" title="花１"><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="花２"><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="花３"><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="花４"><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="花５"><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="花６"><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>
各種メディア使用するには、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>
メディアコンテンツのスライドショーをしてみました。
デモ(メディア）
HTML
Javascript
<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
Fancyboxモーダルウインドー ボックスシャドーCSS（デフォルト）
（jquery.fancybox.cssの４１～４５行）
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
Etiam quis mi eu elit インラインデモ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
キーボード操作関連オプションkeysのJavascript（デフォルト）
keys : {
next : {
13 : 'left', // enter
34 : 'up', // page down
39 : 'left', // right arrow
40 : 'up' // down arrow
},
prev : {
8 : 'right', // backspace
33 : 'down', // page up
37 : 'right', // left arrow
38 : 'down' // up arrow
},
close : [27], // escape key
play : [32], // space - start/stop slideshow
toggle : [70] // letter "f" - toggle fullscreen
}
Fancybox jQueryファイルとメインJS、CSSファイル
<!-- 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" />
ightbox関連リンク
Lightbox系メディアビューア （まとめ サイト内リンク）
No ビューアー JSフレームワーク モーダル 画像 動画*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、 モーダル ● ● ● ● ● 推奨 6 Colorbox jQuery モーダル ● ● ● ● ● 7 Fotorama jQuery 非モーダル ● ● ● ● ● スライダー 8 Fancybox jQuery モーダル ● ● ● ● ● 人気
※ 動画とは、SWF、FLV、MOV、WMV（*1)
※ モーダルwindow：画像などメディアの表示は新しい別ウインドー（*2）
最終更新日 ：2017.5.29(sns button demo）
（左から、prev、スタート/ストップ、next、Fullscreen、Closeの各ボタン）
印（スタート/ストップ印）をクリックします。
なお、ボタンヘルパーとサムネールヘルパーの両方のJS、CSSファイルのインクルードを忘れずに。
最終更新日：2017.5.29(sns button demo）