2011.10.05
LightBox風に画像やswf、webページなどのコンテンツを表示できる
jQuery Pluginの1つとしてFancyboxがありますが、
オプションを日本語でまとめているサイトが見当たらなかったので
自分用に翻訳してみたものをメモしておこうと思います。
(2016.7.19) 訳せてないものは原文入れました。
以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。
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) |
とても参考になる記事をありがとうございます。
１件質問です。
現在は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も試してみたいですね。
その際には同じようにまとめたいと思いますので
よろしくお願いします！