Fancybox(ver.1)で設定できるオプションまとめ
2011.10.05
LightBox風に画像やswf、webページなどのコンテンツを表示できる
jQuery Pluginの1つとしてFancyboxがありますが、
オプションを日本語でまとめているサイトが見当たらなかったので
自分用に翻訳してみたものをメモしておこうと思います。

(2016.7.19) 訳せてないものは原文入れました。

以下、すべてではないですが(おまけに空白もあります)
このようなオプションがあります。

オプション デフォルト値 説明
'padding' 10 枠の幅
'margin' 20 枠の外側の余白。
表示するコンテンツがウインドウより大きい場合、この幅を確保して縮小されます。
'opacity' false When true, transparency of content is changed for elastic transitions
'modal' false true にすると、'overlayShow'→ true、'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton'→ talse になります
'cyclic' false ギャラリーの一番端でNext/Backボタンを押した時にループするか
'scrolling' 'auto' スクロールバーの有無(auto/yes/no)
'width' 560 コンテンツの幅(iframe、swf時)
'height' 340 コンテンツの高さ(iframe、swf時)
'autoScale' true ビューポートに収まるようにスケーリングするか。
'true'の場合、表示するコンテンツがウインドウより大きいと自動的に縮小します。(画像だと無効?)
'autoDimensions' true For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results
'centerOnScroll' false コンテンツを常に中央に表示するか
'ajax' { } Ajaxオプション
'swf' {wmode: 'transparent'} SWFオブジェクトのparams設定
'hideOnOverlayClick' true オーバーレイ部分をクリックした時にfancyboxを閉じるか
'hideOnContentClick' false コンテンツをクリックした時にfancyboxを閉じるか
'overlayShow' true オーバーレイの有無
'overlayOpacity' 0.3 オーバーレイの不透明度
'overlayColor' '#666' オーバーレイの色
'titleShow' true タイトルの表示/非表示
'titleFormat' null Callback to customize title area. You can set any html - custom image counter or even custom navigation
'titlePosition' 'outside' タイトルの位置(outside/inside/over)
'transitionIn'
'transitionOut'
'fade' 開閉時の動き(fade/elastic/none)
'speedIn'
'speedOut'
300 開閉時のスピード
'changeSpeed' 300 ギャラリーでコンテンツを切り替えた時のサイズ変更スピード
'changeFade' 'fast' ギャラリーでコンテンツを切り替えた時のフェードスピード
'easingIn'
'easingOut'
'swing' アニメーションに使用するイージング
'showCloseButton' true クローズボタンの有無
'showNavArrows' true ギャラリーでNext/Backボタンを表示するか
'enableEscapeButton' true Escボタンを押した時にfancyboxを閉じるか
'onStart' null Will be called right before attempting to load the content
'onCancel' null Will be called after loading is canceled
'onComplete' null Will be called once the content is displayed
'onCleanup' null Will be called just before closing
'onClosed' null Will be called once FancyBox is closed

Advancedオプション 説明
'type' コンテンツタイプ。'image' 'ajax' 'iframe' 'swf' 'inline' が設定できます。
'href' コンテンツのURL。HTMLのhref=""で設定したものよりも優先されます。
'title' コンテンツのタイトル。HTMLのtitle=""で設定したものよりも優先されます。
'content' コンテンツの内容。任意のHTMLデータを入れることができます。
'orig' Sets object whos position and dimensions will be used by 'elastic' transition
'index' Custom start index of manually created gallery (since 1.3.1)

| コメント(4)

コメント(4)

とても参考になる記事をありがとうございます。

1件質問です。

現在はfancyboxはVer2となり、
オプション値も変わったようです。

Ver1の「hideOnOverlayClick」オプションは
Ver2はどのオプション値になりますでしょうか?

ご存知でしたらお知恵をお借り出来れば幸いです。

よろしくお願いいたします。

 

>高橋様
コメントありがとうございます!

「hideOnOverlayClick」についてですが、
Ver2からオーバーレイの設定は
「helpers」というオプションに含めるようになっています。

$('.fancybox').fancybox({
   helpers : {
     overlay : {closeClick: false}
   }
});

上記のように書くことで、オーバーレイ部分をクリックしても
閉じなくなるようです。

またスタイルも記述できますので、
指カーソルになってしまうのが気になる場合は

$('.fancybox').fancybox({
   helpers : {
     overlay : {
       closeClick: false,
       css : {'cursor' : 'default'}
     }
   }
});

このようにして矢印カーソルにすることもできます。

十分に検証したものではありませんが、ご参考までに!

 

ご回答が遅れ、誠に申し訳ございません。

具体的なタグまでお教えいただき、誠にありがとうございました!

なるほど、Ver2からだいぶ変わったんですね。

早速お教えいただいたとおりに試したところ、
こちらのイメージ通りに動作させることができました!

非常に助かりました、本当にありがとうございました!

また、ぜひVer2のオプションのまとめ記事などを書いていただければ嬉しいです。
(速攻ではてブします!)

今後ともよろしくお願いいたします。
ありがとうございました。

 

>高橋様
いえいえ、お役に立てたようで何よりです。

Fancyboxにはかなりお世話になっているため、
いずれVer.2も試してみたいですね。

その際には同じようにまとめたいと思いますので
よろしくお願いします!

 

コメントする

※JavaScriptが有効になっている必要があります