| Name | Description |
|---|
| padding | Space inside fancyBox around content. Can be set as array - [top, right, bottom, left].
Integer, Array; Default value: 15 |
| margin | Minimum space between viewport and fancyBox. Can be set as array - [top, right, bottom, left]. Right and bottom margins are ignored if content dimensions exceeds viewport
Integer, Array; Default value: 20 |
| width | Default width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'.
Number, String; Default value: 800 |
| height | Default height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'
Number, String; Default value: 600 |
| minWidth | Minimum width fancyBox should be allowed to resize to
Number; Default value: 100 |
| minHeight | Minimum height fancyBox should be allowed to resize to
Number; Default value: 100 |
| maxWidth | Maximum width fancyBox should be allowed to resize to
Number; Default value: 9999 |
| maxHeight | Maximum height fancyBox should be allowed to resize to
Number; Default value: 9999 |
| autoSize | If true, then sets both autoHeight and autoWidth to true
Boolean; Default value: true |
| autoHeight | If set to true, for 'inline', 'ajax' and 'html' type content width is auto determined. If no dimensions set this may give unexpected results
Boolean; Default value: false |
| autoWidth | If set to true, for 'inline', 'ajax' and 'html' type content height is auto determined. If no dimensions set this may give unexpected results
Boolean; Default value: false |
| autoResize | If set to true, the content will be resized after window resize event
Boolean; Default value: !isTouch |
| autoCenter | If set to true, the content will always be centered
Boolean; Default value: !isTouch |
| fitToView | If set to true, fancyBox is resized to fit inside viewport before opening
Boolean; Default value: true |
| aspectRatio | If set to true, resizing is constrained by the original aspect ratio (images always keep ratio)
Boolean; Default value: false |
| topRatio | Top space ratio for vertical centering. If set to 0.5, then vertical and bottom space will be equal. If 0 - fancyBox will be at the viewport top
Number; Default value: 0.5 |
| leftRatio | Left space ratio for horizontal centering. If set to 0.5, then left and right space will be equal. If 0 - fancyBox will be at the viewport left
Number; Default value: 0.5 |
| scrolling | Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', 'no' or 'visible'
String; Default value: 'auto' |
| wrapCSS | Customizable CSS class for wrapping element (useful for custom styling)
string; Default value: |
| arrows | If set to true, navigation arrows will be displayed
Boolean; Default value: true |
| closeBtn | If set to true, close button will be displayed
Boolean; Default value: true |
| closeClick | If set to true, fancyBox will be closed when user clicks the content
Boolean; Default value: false |
| nextClick | If set to true, will navigate to next gallery item when user clicks the content
Boolean; Default value: false |
| mouseWheel | If set to true, you will be able to navigate gallery using the mouse wheel
Boolean; Default value: true |
| autoPlay | If set to true, slideshow will start after opening the first gallery item
Boolean; Default value: false |
| playSpeed | Slideshow speed in milliseconds
Integer; Default value: 3000 |
| preload | Number of gallery images to preload
Integer; Default value: 3 |
| modal | If set to true, will disable navigation and closing
Boolean; Default value: false |
| loop | If set to true, enables cyclic navigation. This means, if you click "next" after you reach the last element, first element will be displayed (and vice versa).
Boolean; Default value: true |
| ajax | Options for ajax request
Object; Default value:{
dataType : 'html',
headers : { 'X-fancyBox': true }
} |
| iframe | Options for content type "iframe"
Object; Default value:{
scrolling : 'auto',
preload : true
} |
| swf | Options for content type "swf"
Object; Default value:{
wmode: 'transparent',
allowfullscreen : 'true',
allowscriptaccess : 'always'
} |
| keys | Define keyboard keys for gallery navigation, closing and slideshow
Object; Default value:{
next : {
13 : 'left', // enter
34 : 'up', // page down
39 : 'left', // right arrow
40 : 'up' // down arrow
},
prev : {
8 : 'right', // backspace
33 : 'down', // page up
37 : 'right', // left arrow
38 : 'down' // up arrow
},
close : [27], // escape key
play : [32], // space - start/stop slideshow
toggle : [70] // letter "f" - toggle fullscreen
} |
| direction | Default navigation direction (for navigation arrows, too)
Object; Default value:{
{
next : 'left',
prev : 'right'
}
} |
| scrollOutside | If true, the script will try to avoid horizontal scrolling for iframes and html content
Boolean; Default value: true |
| index | Overrides group start index
Integer; Default value: 0 |
| type | Overrides type for content. Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
String; Default value: null |
| href | Overrides content source link
String; Default value: null |
| content | Overrides content to be displayed
String; Default value: null |
| title | Overrides title content, accepts any HTML
String; Default value: null |
| tpl | Object containing various templates
Object; Default value:{
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
image : '<img class="fancybox-image" src="{href}" alt="" />',
iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',
error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
} |
| openEffect / closeEffect / nextEffect / prevEffect | Animation effect ('elastic', 'fade' or 'none') for each transition type
String; Default value: 'fade', 'fade', 'elastic', 'elastic' |
| openSpeed / closeSpeed / nextSpeed / prevSpeed | The time it takes (in ms, or "slow", "normal", "fast") to complete transition
Integer; Default value: 250 |
| openEasing / closeEasing / nextEasing / prevEasing | Easing method for each transition type. You have numerous choices if easing plugin is included
String; Default value: 'swing' |
| openOpacity / closeOpacity | If set to true, transparency is changed for elastic transitions
Boolean; Default value: true |
| openMethod / closeMethod / nextMethod / prevMethod | Method from $.fancybox.transitions() that handles transition (you can add custom effects there)
String; Default value: 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut' |
| helpers | Object containing enabled helpers and options for each of them
Object; Default value:{
overlay : {
closeClick : true, // if true, fancyBox will be closed when user clicks on the overlay
speedOut : 200, // duration of fadeOut animation
showEarly : true, // indicates if should be opened immediately or wait until the content is ready
css : {}, // custom CSS properties
locked : true // if true, the content will be locked into overlay
},
title : {
type : 'float' // 'float', 'inside', 'outside' or 'over'
}
} |
| live | If set to true, fancyBox uses "live" to assign click event. Set to "false", if you need to apply only to current collection, e.g., if using something like -$("#page").children().filter('a').eq(0).fancybox();
Boolean; Default value: true |
| parent | Parent element of the container. This is useful for ASP.NET where the top element is "form" -$(".fancybox").fancybox({
parent: "form:first" // jQuery selector
});
String; Default value: body |
521.zip