Fancybox V4 - Ajax コンテンツ Filter ajax content（デモ）

(1) デフォルト例

Demo 

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

(2) コンテンツにフィルターを使った方法

1) "data-filter"属性で使う - Demo 

<p style="margin-left:25px">
  <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>

2) "data-src"属性に付加して使う - Demo V4廃止 

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

（参考）Ajax コンテンツのソースコード - fancybox31-Keyboard.html； 

<h2 id="main-keyboad" style="text-align:center"> キーボードによるFancyBoxの画面操作</h3>
<p>FancyBoxのギャラリーをキーボードのボタンにより操作できます。
</p>
<DIV id="Keyboard1">
<h4>１．キーボード キー配置図</h4>
<table id="Keyboard" width="100%" bordercolor="#808080" style="border-collapse: collapse;font-size:13px" cellpadding="4" cellspacing="0" border="1" >
<caption>キーボード</caption><tr><td><img src="img/Jis_109ekeyboad.png" title="キーボード" width="100%" border=0></td></tr>
<tr><td>
※関連するキーについて、青色、緑色、黄色でマークしています。２つあるキーは、色でマークしていない方も使用できます。
</td></tr>
</table>
</DIV>
<DIV id="Keyboard2">
<h4>２．fancyBox キー操作説明</h4>
<table id="Keyboard" width="100%" bordercolor="#808080" style="border-collapse: collapse;font-size:13px" cellpadding="4" cellspacing="0" border="1" >
<caption>キーボード操作説明</caption>
<tr bgcolor=beige align=center><td width=150>機能名（Fancybox)</td><td width=150>キー名（キーボード）</td><td>動作機能</td><td>備考</td></tr>
<tr><td rowspan=4 align=center>next</td><td align=center style="background:rgba(0,0,255,0.7)">Enter</td><td>今の画像を左へ移動し、次の画像を表示（アニメーション動作）</td><td></td></tr>
<tr><td align=center style="background:rgba(0,0,255,0.7)">Page Down</td><td>今の画像を上へ移動し、次の画像を表示（アニメーション動作）</td><td></td></tr>
<tr><td align=center style="background:rgba(0,0,255,0.7)">→</td><td>今の画像を左へ移動し、次の画像を表示（アニメーション動作）</td><td></td></tr>
<tr><td align=center style="background:rgba(0,0,255,0.7)">↓</td><td>今の画像を上へ移動し、次の画像を表示（アニメーション動作）</td><td></td></tr>
<tr><td rowspan=4 align=center>prev</td><td align=center style="background:rgba(0,255,0,0.7)">Backspace</td><td>今の画像を右へ移動し、前の画像を表示（アニメーション動作）</td><td></td></tr>
<tr><td align=center style="background:rgba(0,255,0,0.7)">Page Up</td><td>今の画像を下へ移動し、前の画像を表示（アニメーション動作）</td><td></td></tr>
<tr><td align=center style="background:rgba(0,255,0,0.7)">←</td><td>今の画像を右へ移動し、前の画像を表示（アニメーション動作）</td><td></td></tr>
<tr><td align=center style="background:rgba(0,255,0,0.7)">↑</td><td>今の画像を下へ移動し、前の画像を表示（アニメーション動作）</td><td></td></tr>
<tr><td align=center>close</td><td align=center style="background:rgba(225,225,0,0.9)">Esc</td><td>Fancyboxをクローズ</td><td></td></tr>
<tr><td align=center>start/stop</td><td align=center style="background:rgba(225,225,0,0.9)">space</td><td>スライドショーをスタート、ストップ</td><td></td></tr>
<tr><td align=center>fullscreen</td><td align=center style="background:rgba(225,225,0,0.9)">F</td><td>画像を拡大／元に戻す（トグル）</td><td></td></tr>
<tr><td colspan=4>
※機能名（Fancybox)とキー名（キーボード）の対応はJavascriptで定義します。Javascriptは
<a class="fancybox" href="#inline3" title="キーボード操作関連Javascript">こちら</a> 。
</td></tr>
</table>
</DIV>