FancyBox1.3.4を使用した時の使い方をメモします。
FancyBoxはLightboxのように表示するjQueryのプラグインです。
下記のリンクよりダウンロードできます。
■ FancyBoxの使い方
【共通で読み込むファイル】
FancyBoxのスタイルシート、FancyBoxのJSファイル、jQueryなどの
ファイル等を読み込みます。
1 2 3 4 | <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> |
※マウスホイールイベントを使用する場合は下記も読み込みます。
1 | <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> |
○デフォルトの場合（オプションなし）
【jQuery】
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function() { $(".fancybox1").fancybox(); });</script> |
【HTML】
1 | <a class="fancybox1" href="./img/sample_b.jpg"><img alt="sample" src="./img/sample_s.jpg" /></a> |
表示するものにタイトルを表示させる場合は、「title=””」に記載します。
1 | <a class="fancybox1" href="./img/sample_b.jpg" title="タイトル"><img alt="sample" src="./img/sample_s.jpg" /></a> |
○グループ化させる場合
「rel=””」にグループ化をする対象の物に同じ値を付けます。
【jQuery】
1 2 3 4 5 6 7 | <script type="text/javascript"> $(document).ready(function() { $(".fancybox2").fancybox({ 'cyclic' : true }); });</script> |
【HTML】
1 2 3 4 | <a class="fancybox2" rel="group" href="./img/sample1_b.jpg" title=""><img alt="" src="./img/sample1_s.jpg" /></a><a class="fancybox2" rel="group" href="./img/sample2_b.jpg" title=""><img alt="" src="./img/sample2_s.jpg" /></a><a class="fancybox2" rel="group" href="./img/sample3_b.jpg" title=""><img alt="" src="./img/sample3_s.jpg" /></a><a class="fancybox2" rel="group" href="./img/sample4_b.jpg" title=""><img alt="" src="./img/sample4_s.jpg" /></a> |
上記以外にもFancyBoxのエフェクトや背景、透過などのオプションが色々あるので、
サイトに合わせてカスタマイズできると思います。
また、「FancyBox1.3.4」は「jQuery1.9」で動作しなかったので「jQuery1.8」を使用しました。
ピンバック: jQueryプラグインのfancyboxを使ってみた | たんたんと