FancyBox1.3.4を使用した時の使い方をメモします。

FancyBoxはLightboxのように表示するjQueryのプラグインです。
下記のリンクよりダウンロードできます。

FancyBox

---

■ FancyBoxの使い方

【共通で読み込むファイル】

FancyBoxのスタイルシート、FancyBoxのJSファイル、jQueryなどの
ファイル等を読み込みます。

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

※マウスホイールイベントを使用する場合は下記も読み込みます。

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

---

○デフォルトの場合（オプションなし）

【jQuery】

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox1").fancybox();
    });
</script>

【HTML】

<a class="fancybox1" href="./img/sample_b.jpg"><img alt="sample" src="./img/sample_s.jpg" /></a>

表示するものにタイトルを表示させる場合は、「title=””」に記載します。

<a class="fancybox1" href="./img/sample_b.jpg" title="タイトル"><img alt="sample" src="./img/sample_s.jpg" /></a>

○グループ化させる場合

「rel=””」にグループ化をする対象の物に同じ値を付けます。

【jQuery】

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox2").fancybox({
            'cyclic'        : true
        });
    });
</script>

【HTML】

<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」を使用しました。

---

• ツイート
•