20100510-彈跳圖片的fancybox（粉絲盒子）筆記-以彈跳照片為例

從fb的網站範例中摸索出的筆記-以彈跳照片為例

一般而言的fb使用方式，
a 裡面包含了 img。
而js是用
$("選擇器").fancybox({
});


'titleShow': false

titleShow是圖片的title，預設是true會出現，要關掉就直接設false。
而title會出現的內容，以 a 的 title 為主，若沒有則是使用img裡的alt。

'transitionIn'    : 'elastic',

在開啟時使用elastic的效果彈跳視窗，亦有fade、與none的效果

'transitionOut'    : 'elastic'

在關閉時使用elastic的效果彈跳視窗，亦有fade、與none的效果

'titlePosition'    : 'inside'

設定說明文，以 a 的 title 為主，若沒有則是使用img裡的alt。
參數中，除了 inside 還包括了 outside 及 over。
outside：在彈跳視窗之外，另用背景呈現
inside：圖片會有背景呈現文字
over：直接在圖片上呈現一層色彩，文字覆蓋在圖片上。

以下為官方的設定說明：

Key	Default value	Description
padding	10	Space between FancyBox wrapper and content
margin	20	Space between viewport and FancyBox wrapper
opacity	false	When true, transparency of content is changed for elastic transitions
modal	false	When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false'
cyclic	false	When true, galleries will be cyclic, allowing you to keep pressing next/back.
scrolling	'auto'	Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no'
width	560	Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
height	340	Height for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
autoScale	true	If true, FancyBox is scaled to fit in viewport
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	When true, FancyBox is centered while scrolling page
ajax	{ }	Ajax options Note: 'error' and 'success' will be overwritten by FancyBox
swf	{wmode: 'transparent'}	Flashvars to put on the swf object
hideOnOverlayClick	true	Toggle if clicking the overlay should close FancyBox
hideOnContentClick	false	Toggle if clicking the content should close FancyBox
overlayShow	true	Toggle overlay
overlayOpacity	0.3	Opacity of the overlay (from 0 to 1; default - 0.3)
overlayColor	'#666'	Color of the overlay
titleShow	true	Toggle title
titlePosition	'outside'	The position of title. Can be set to 'outside', 'inside' or 'over'
titleFormat	null	Callback to customize title area. You can set any html - custom image counter or even custom navigation
transitionIn, transitionOut	'fade'	The transition type. Can be set to 'elastic', 'fade' or 'none'
speedIn, speedOut	300	Speed of the fade and elastic transitions, in milliseconds
changeSpeed	300	Speed of resizing when changing gallery items, in milliseconds
changeFade	'fast'	Speed of the content fading while changing gallery items
easingIn, easingOut	'swing'	Easing used for elastic animations
showCloseButton	true	Toggle close button
showNavArrows	true	Toggle navigation arrows
enableEscapeButton	true	Toggle if pressing Esc button closes 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