Fancybox - Fancy jQuery lightbox alternative| API & Options

#
fancybox

- Home
- How to use
- API & Options
- Tips & Tricks
- FAQ
- Support

## Warning!

These are options for 1.3+, for versions 1.2+ look there

Documention for fancyBox2 is available at fancyapps.com

#
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
$.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

Download fancyBox2 from http://fancyapps.com

Past Release
Version 1.3.4 (2010/11/11)

Changelog

Donate

## Our Sponsors