jQuery fancyBox v1.3.4 の使い方や設定

CATEGORY: jQuery | TAG: Googlemap, Lightbox, Youtube, プラグイン

2014年12月29日

jQuery fancyBox v1.3.4 の使い方や設定に関する個人的なメモ。

fancyBox は v2.x からライセンスが変わり、商用（営利目的）の場合は有料となっているため、古いバージョンを探したら以下のサイトにあった。このサイトと本家（？）の fancyBox との関係は不明。

http://fancybox.net

v1.3.4 のライセンスは MIT and GPL licenses。

MIT and GPL licenses（以下は概要であり、正確でない可能性あり）

無償（無保証）
利用/改造/再配布可能
著作権表示義務あり
商用利用可能

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

fancyBox v1.3.4 のダウンロードと読み込み

http://fancybox.net のページの右側にあるリンクからダウンロード。

Past Release
Version 1.3.4 (2010/11/11) ← ここの部分

JavaScript ファイルの読み込み

jQuery （1.4）とダウンロードした JavaScript ファイルを body タグの直前等で読み込む。最新の jQuery を使うとエラーになるみたい。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

必要に応じてオプションのイージングのファイルを読み込む。

<script type="text/javascript" src="fancybox1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>

CSSファイルの読み込み

ダウンロードした CSS ファイルを head 内で読み込む。

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

HTML の記述

画像要素の場合、それらを a 要素で囲み href 属性に fancyBox で表示する画像等のパスを指定し、適当なクラス（この例では .fancybox）を指定

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

YouTube や Google Map など iframe で表示する場合（後述）は、クラスに「iframe」を追加。

<a class="youtube iframe" href="//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=0">iframe 表示</a>

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

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

但しこの方法だと W3C のチェックで以下のようなエラーになる。（回避方法は後述。イニシャライズの項参照）

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

<div class="photo_list">
<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 class="fancybox" rel="group1" href="images/large/3.jpg"><img src="images/small/3.jpg" alt="" /></a>
<a class="fancybox" rel="group1" href="images/large/4.jpg"><img src="images/small/4.jpg" alt="" /></a>  
</div><!--end of #photo_list-->

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

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

<div class="photo_list">
<a class="fancybox" rel="group3" href="images/large/1.jpg" title="金閣寺"><img src="images/small/1.jpg" alt="" /></a>
<a class="fancybox" rel="group3" href="images/large/2.jpg" title="竜安寺"><img src="images/small/2.jpg" alt="" /></a>
<a class="fancybox" rel="group3" href="images/large/3.jpg" title="庭の木々"><img src="images/small/3.jpg" alt="" /></a>
<a class="fancybox" rel="group3" href="images/large/4.jpg" title="池"><img src="images/small/4.jpg" alt="" /></a>  
</div><!--end of #photo_list-->

fancyBox のイニシャライズ

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script>
jQuery(function($){
  $(".fancybox").fancybox();  
});
</script>

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

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

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

jQuery(function($){
  $(".fancybox").attr('rel', 'group2').fancybox();  
});

サンプル１

オプション

オプションを指定することにより、効果や見栄えを変更することが可能。以下はいくつかのオプションの例。


キー	デフォルト値	意味
padding	10	FancyBox のラッパーとコンテンツの間のスペース
margin	20	FancyBox のラッパーとビューポートの間のスペース
cyclic	false	循環（ループ）させるかどうか。true を指定すると、最後のコンテンツの次に先頭のコンテンツが表示される。
width	560	タイプが ‘iframe’ または ‘swf’ の場合の幅。また inline タイプで「autoDimensions」が「false」に設定されている場合の幅。
height	340	タイプが ‘iframe’ または ‘swf’ の場合の高さ。また inline タイプで「autoDimensions」が「false」に設定されている場合の高さ。
overlayOpacity	0.3	オーバーレイの透明度
overlayColor	‘#666’	オーバーレイの色
titlePosition	‘outside’	タイトルの位置。指定可能な値は’outside’, ‘inside’ または ‘over’
transitionIn, transitionOut	‘fade’	トランジション効果。指定可能な値は ‘elastic’, ‘fade’ または ‘none’
speedIn, speedOut	300	トランジション効果のスピード。ミリ秒で指定。
changeSpeed	300	ギャラリー表示で、次の画像に変わる際のスピード。ミリ秒で指定。
changeFade	‘fast’	ギャラリー表示で、次の画像に変わる際のフェードのスピード。
easingIn, easingOut	‘swing’	elastic アニメーション効果のイージングの指定。イージングのプラグインを読み込む必要あり。

Available Options（指定可能なオプション）

オプションを指定する例。

transitionIn, transitionOut ：アニメーション効果を「elastic」に指定
cyclic：ループするように指定
titlePosition：内側に表示
easingIn, easingOut：イージングを指定（イージング・プラグインを読み込む必要あり）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script>
jQuery(function($){
    $(".fancybox").fancybox({
        transitionIn : 'elastic',
        speedIn  : 200,
        transitionOut : 'elastic',
        speedOut  : 250,
        cyclic: true,
        titlePosition: 'inside',
        easingIn : 'easeInOutExpo',
        easingOut : 'easeInOutExpo'
    });
});

タイトル（outside,over を指定した場合）をセンター寄せする CSS の設定の例

.fancybox-title-outside, .fancybox-title-over {
  text-align: center;
}

サンプル２

YouTube

YouTube を表示する例。

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

HTML

<ul>
<li><a class="youtube iframe" href="//www.youtube.com/embed/Yk-GTl2JZCc?autoplay=1"><img src="http://i1.ytimg.com/vi/Yk-GTl2JZCc/hqdefault.jpg" width="200"></a></li>
<li><a class="youtube iframe" href="//www.youtube.com/embed/jkinLvUrUYE?autoplay=1"><img src="http://i1.ytimg.com/vi/jkinLvUrUYE/hqdefault.jpg" width="200"></a></li>
</ul>

$(".youtube").fancybox({
    width : '80%',
    height : '80%'
});

Google Map

Google Map を表示する例。

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

HTML

<a class="gmap 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>

$(".gmap").fancybox({
    width: '70%',
    height: '70%'
});

サンプル３

Web Design Leaves