jQuery:FancyBoxを使用し、Lightboxのように表示する

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

FancyBoxLightboxのように表示する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」を使用しました。


  • このエントリーをはてなブックマークに追加

jQuery:FancyBoxを使用し、Lightboxのように表示する” への1件のコメント

  1. ピンバック: jQueryプラグインのfancyboxを使ってみた | たんたんと

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です