jquery jQuery fancyBox v2 の使い方や設定

CATEGORY: jQuery | TAG: , , ,

2014年12月29日

jQuery プラグイン fancyBox の基本的な使い方や設定に関する個人的なメモ。この時点での fancyBox のバージョンは「v2.1.5」。

関連ページ：「jQuery fancyBox v1.3.4 の使い方や設定」

fancyBox

目次

jQuery プラグイン fancyBox のダウンロード

fancyBox のページの「license & download」をクリックし、「Download v2.1.5」をクリックしてダウンロード。

ライセンス：Attribution-NonCommercial 3.0 Unported（表示 – 非営利 3.0 非移植 ）

You are free to use fancyBox for your personal or non-profit website projects.
You can get the author’s permission to use fancyBox for commercial websites by paying a fee.

個人的、非営利の場合の使用は自由。商用（営利目的）の場合は有料（fancyBox Single Domain License $19.00）ということらしい。

fancyBox をダウンロードして解凍したフォルダの中身。

fancyBox-2

  • demo: デモ（サンプル）ファイル等。使い方の確認等に便利。
  • lib: jQuery 本体のファイルや jquery.mousewheel-3.0.6.pack.js が入っている
  • source: fancyBox 本体のファイル(js, css）や必要な画像等

以下は source フォルダの中身。

fancyBox-3

jQuery プラグイン fancyBox の読み込み

  • まずは、jQuery が必要なので読み込む。
  • source フォルダに入っている jquery.fancybox.css, jquery.fancybox.pack.js を head 内等で読み込む。
  • 必要に応じて、オプションのファイルを読み込む。

以下はダウンロードして解凍下フォルダを「fancybox」という名前で保存した場合の例。パスは自分の環境に合わせて変更。またファイルを移動した場合はそれに合わせてパスを変更する必要あり。

<!-- オプションを使用しない場合 -->

<!-- jQuery の読み込み（必須） -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<!-- fancyBox の読み込み（必須）-->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>

以下はオプションのファイルを読み込む例。

<!-- jQuery の読み込み（必須） -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<!-- Add mousewheel plugin (オプションのマウスホイールプラグイン) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- fancyBox の読み込み（必須） -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- オプショナルの helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

fancyBox の HTML の記述

個別に画像を表示する場合

この場合、ポップアップされた画像には「次へ」や「前へ」の矢印は表示されない。

リンク要素（a 要素）の href 属性に fancyBox で表示する画像等のパスを指定し、適当なクラス（この例では .fancybox）を指定する。

<a class="fancybox" href="images/large/1.jpg"><img src="images/small/1.jpg" alt="" /></a>
<a class="fancybox" href="images/large/2.jpg"><img src="images/small/2.jpg" alt="" /></a>

ギャラリー表示（複数の画像をグループ化）する場合

この場合、ポップアップされた画像には「次へ」や「前へ」の矢印が表示される。

方法１．

a 要素の rel 属性に同じ値・文字列（何でもOK）を指定。以下は「rel=”group1″」と指定した場合。

但しこの方法だと W3C のチェックで以下のようなエラーになる。

「Bad value group1 for attribute rel on element a: The string group1 is not a registered keyword.」

<a class="fancybox" rel="group1" href="images/large/1.jpg"><img src="images/small/1.jpg" alt="" /></a>
<a class="fancybox" rel="group1" href="images/large/2.jpg"><img src="images/small/2.jpg" alt="" /></a>

方法２．

a 要素の data-fancybox-group 属性に同じ値・文字列（何でもOK）を指定。以下は「data-fancybox-group=”group2″」と指定した場合。

<a class="fancybox" data-fancybox-group="group2" href="images/large/1.jpg"><img src="images/small/1.jpg" alt="" /></a>
<a class="fancybox" data-fancybox-group="group2" href="images/large/2.jpg"><img src="images/small/2.jpg" alt="" /></a>

画像をキャプション付きで表示する場合

a 要素の title 属性にキャプションで表示する文字列を設定

<a class="fancybox" data-fancybox-group="group3" href="images/large/1.jpg" title="金閣寺"><img src="images/small/1.jpg" alt="" /></a>
<a class="fancybox" data-fancybox-group="group3" href="images/large/2.jpg" title="竜安寺"><img src="images/small/2.jpg" alt="" /></a>

jQuery プラグイン fancyBox のイニシャライズ

fancyBox のイニシャライズ（初期設定）を jQuery で記述。リンク要素に指定したクラスの要素（この例では.fancybox）に対して .fancybox() を実行。

<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<script>
jQuery(function($){
    $(".fancybox").fancybox();
});
</script>

これだけで Lightbox 表示が可能。

ギャラリー表示（複数の画像をグループ化）する場合に、a 要素の rel 属性に値を指定すると W3C でエラーになってしまうと書いたが、イニシャライズする際に、jQuery の attr を使って rel 属性を指定することもできる。

HTML では、rel 属性を指定しない。

HTML

<a class="fancybox" href="images/large/1.jpg"><img src="images/small/1.jpg" alt="" /></a>
<a class="fancybox" href="images/large/2.jpg"><img src="images/small/2.jpg" alt="" /></a>

イニシャライズする際に、以下のようにする。

<script>
jQuery(function($){
    $(".fancybox").attr('rel','group').fancybox();
});
</script>

サンプル１

オーバーレイの色や透明度の変更

以下の方法で CSS の ‘background’ を使って色や透明度を変更可能。

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.35)'
            }
        }
    }
});

Change overlay color and opacity

このようなカスタマイズ例は「Tips & tricks」に色々掲載されている。

効果（エフェクト）の変更・設定

効果（エフェクト）のオプションは以下のようなものがある（他にもあり）。

効果（エフェクト）のオプション
オプション 指定可能な値 デフォルト値
openEffect ‘elastic’, ‘fade’ or ‘none’ ‘fade’
closeEffect ‘elastic’, ‘fade’ or ‘none’ ‘fade’
nextEffect ‘elastic’, ‘fade’ or ‘none’ ‘elastic’
prevEffect ‘elastic’, ‘fade’ or ‘none’ ‘elastic’
openSpeed ミリ秒で指定。または “slow”, “normal”, “fast” 250
closeSpeed ミリ秒で指定。または “slow”, “normal”, “fast” 250
nextSpeed ミリ秒で指定。または “slow”, “normal”, “fast” 250
prevSpeed ミリ秒で指定。または “slow”, “normal”, “fast” 250

表示時とクローズ時のエフェクトを変更する例。

<script>
jQuery(function($){
        $(".fancybox").fancybox({
            openEffect : 'elastic',
            openSpeed  : 400,
            closeEffect : 'elastic',
            closeSpeed  : 300
        });  
});
</script>

「次へ」「前へ」をクリックするとフェードする

Fade content when changing gallery items

大きさの異なる画像などを表示する際に良いかも知れないカスタマイズ例。

「resizeIn」という「transitions」を定義して、それを指定する。

(function ($, F) {
    F.transitions.resizeIn = function() {
        var previous = F.previous,
            current  = F.current,
            startPos = previous.wrap.stop(true).position(),
            endPos   = $.extend({opacity : 1}, current.pos);

        startPos.width  = previous.wrap.width();
        startPos.height = previous.wrap.height();

        previous.wrap.stop(true).trigger('onReset').remove();

        delete endPos.position;

        current.inner.hide();

        current.wrap.css(startPos).animate(endPos, {
            duration : current.nextSpeed,
            easing   : current.nextEasing,
            step     : F.transitions.step,
            complete : function() {
                F._afterZoomIn();

                current.inner.fadeIn("fast");
            }
        });
    };

}(jQuery, jQuery.fancybox));

jQuery(function($){
    $(".fancybox").fancybox({
            nextMethod : 'resizeIn',
            nextSpeed  : 250,        
            prevMethod : false
     });
});

サンプル２

Fancybox transitions

以下のプラグインを使用すると、いろいろなアニメーション効果を適用できる。

Fancybox transitions

Fancybox transitions のダウンロード： GitHub

ダウンロードしたら、jquery.fancybox-transitions.js と jquery.fancybox-transitions.css を読み込む。

<!-- Add jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/js/jquery.fancybox.pack.js?v=2.1.5"></script>

<!--Add Fancybox transitions ダウンロードしたプラグインファイルの読み込み-->
<link rel="stylesheet" href="/css/jquery.fancybox-transitions.css?v=0.1" type="text/css" media="screen" />
<script src="/js/jquery.fancybox-transitions.js?v=0.1"></script>

あとは openMethod や closeMethod に適用したい効果を指定する。

$('.fancybox').fancybox({
    openMethod: 'superscaleIn',
    closeMethod: 'superscaleOut'
});

nextMethod や prevMethod にも指定できるようだが、期待通りの効果にならない場合もあるみたい。

$('.fancybox').fancybox({
    openMethod: 'newspaperIn',
    nextMethod: 'superscaleIn',
    prevMethod:  false,
    closeMethod: 'newspaperOut'
    });

Fancybox transitions プラグインに含まれているトランジション効果

  • Drop in (‘drop’)
  • Fade in and scale up (‘fadescale’)
  • Slide in from the right (‘slideright’)
  • Slide in from the bottom (‘slidebottom’)
  • Newspaper (twirl in) (‘newspaper’)
  • Fall (‘fall’)
  • Fall from the side (‘fallside’)
  • Slide from the top (‘stickyup’)
  • Horizontal 3D flip (‘horizontalflip’)
  • Vertical 3D flip (‘verticalflip’)
  • 3D swinging sign (‘sign’)
  • Super scaled! (‘superscaled’)
  • 3D growing slit (‘slit’)
  • 3D rotate from bottom (‘rotatebottom’)
  • 3D rotate from left (‘rotateleft’)
  • Blur (‘blur’)

YouTube

YouTube を表示する例。

クラス属性に「fancybox.iframe」を追加するか、data-fancybox-type 属性に「iframe」を指定する。
href 属性に YouTube の埋め込みコードを設定。
必要に応じて autoplay=1（自動再生） または autoplay=0（自動再生なし）を指定。

HTML

<ul>
<li><a class="youtube fancybox.iframe" href="//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=1">And I Love Her </a></li>
<li><a class="youtube" data-fancybox-type="iframe" href="//www.youtube.com/embed/jkinLvUrUYE?autoplay=1">Summertime </a></li>
</ul>

グループ化することも可能。この場合は autoplay=0（自動再生なし）を指定したほうがよいと思う。（そうしないとポーズをクリックすると次の映像に移ってしまう）

<ul>
<li><a class="youtube fancybox.iframe" data-fancybox-group="group1" href="//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=0">And I Love Her </a></li>
<li><a class="youtube" data-fancybox-type="iframe" data-fancybox-group="group1" href="//www.youtube.com/embed/jkinLvUrUYE?autoplay=0">Summertime </a></li>
</ul>

jQuery

<script>
jQuery(function($){

    $(".youtube").fancybox({
        maxWidth : 800,
        maxHeight : 600,
        fitToView : false,
        width : '70%',
        height : '70%',
        autoSize : false,
        closeClick : false,
        openEffect : 'none',
        closeEffect : 'none',
        nextEffect : 'none', //グループ化した場合 //グループ化した場合
        prevEffect : 'none'
    });                 
});
</script>

Google Map

Google Map を表示する例。

クラス属性に「fancybox.iframe」を追加するか、data-fancybox-type 属性に「iframe」を指定する。
href 属性に Google Map の埋め込みコードを設定。
Google Map の埋め込みコードは目的の Google Map を開いて、画面右下のほうにある歯車のアイコンをクリック。
「地図を共有または埋め込む」をクリック。
「地図を埋め込む」をクリック。
表示される iframe の href 属性の部分をコピーして a 要素の href 属性にペースト。

HTML

<ul>
<li>
<a class="gmap fancybox.iframe" href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6479.273177500845!2d139.81066781349247!3d35.710559560288075!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1419872619501">Google maps (iframe)</a>
</li>
</ul>

jQuery

<script>
jQuery(function($){
    $(".gmap").fancybox({
        maxWidth  : 1200,
        maxHeight  : 800,
        fitToView  : false,
        width    : '90%',
        height    : '90%',
        autoSize  : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect  : 'none'
    });  
});
</script>

サンプル３