This site is kept for historical purposes and represents original version of the Fancybox. Check out the latest - Fancybox v5

Available options

You can pass options as key/value object to fancybox() function or modify them at the bottom of FancyBox JS file.

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

Advanced options

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)

Public Methods

FancyBox provides some function to work with it

Method Description
$.fancybox.showActivity Shows loading animation
$.fancybox.hideActivity Hides loading animation
$ 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
$ Centers FancyBox in viewport

Our Sponsors