fancybox 옵션 및 함수 설명
| 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'} | Params 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 |
| Key | Description |
|---|---|
| type | Forces content type. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline' |
| href | Forces content source |
| title | Forces title |
| content | Forces content (can be any html data) |
| 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 provides some function to work with it
| Method | Description |
|---|---|
| $.fancybox.showActivity | Shows loading animation |
| $.fancybox.hideActivity | Hides loading animation |
| $.fancybox.next | Displays the next gallery item |
| $.fancybox.prev | Displays the previous gallery item |
| $.fancybox.pos | Displays item by index from gallery |
| $.fancybox.cancel | Cancels loading content |
| $.fancybox.close | Hides FancyBox Within an iframe use - parent.$.fancybox.close(); |
| $.fancybox.resize | Auto-resizes FancyBox height to match height of content |
| $.fancybox.center | Centers FancyBox in viewport |