FancyBox API说明

最新推荐文章于 2021-08-05 20:54:55 发布

jiangtongcn

最新推荐文章于 2021-08-05 20:54:55 发布

阅读量2.2k

点赞数

分类专栏： RIA

RIA 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Warning!

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

Documention for fancyBox2 is available at fancyapps.com

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

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