Fancy Box Available Option

You can pass options as key/value object to fancybox() function or modify them at the
bottom of FancyBox JS file. These are options for 1.3+, for versions 1.2+ look there.
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
Key Default value Description
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
Key Default value Description
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
Method Description
$.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