画像を拡大表示させるjQuery[fancybox]

写真等の画像をさせる事ができる、
JQueryのfancyboxの使い方です。

下記サイトでファイルをダウンロードします。
http://fancybox.net/

ダウンロードして
解凍したフォルダ内の「fancybox」フォルダを読み込みたいサイトにコピーします。

今回は「common」の「js」フォルダに入れています。

ますヘッダー内に下記コードを記述してfancyboxを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="common/js/fancybox/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript" src="common/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

次にスクリプトタグも記述します。

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

「.group」の箇所には任意のグループ名を付けてください。

「cyclic: true」の箇所はループ表示するかどうかを指定しています。
この場合はtrueなのでループ表示がONになっています。

そして下記のようにHTMLを組むとクリックすると拡大画像が表示されます。

<p><a class="group" rel="group1" href="img/pic01_l.jpg"><img src="img/pic01.jpg" alt=""></a></p>
<p><a class="group" rel="group1" href="img/pic02_l.jpg"><img src="img/pic02.jpg" alt=""></a></p>
<p><a class="group" rel="group1" href="img/pic03_l.jpg"><img src="img/pic03.jpg" alt=""></a></p>
<p><a class="group" rel="group1" href="img/pic04_l.jpg"><img src="img/pic04.jpg" alt=""></a></p> 

「rel」で任意の名前を付けた同一のグループ名を付ける事によって
拡大表示した時に同じグループ名内でループ表示されます。