memo:fancybox1.3的参数一览

http://fancybox.net/


fancybox是和lightbox类似的插件。用法比较简单。

把一些设置的参数罗列出来如下:


可用参数:

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)


公开方法:

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


同一个画面中有pdf object标签的时候,IE中用fancybox显示图片的话,图片会被pdf覆盖。

打开图片的方法可以用iframe方式。调整一下css就可以解决这个问题了。


你可能感兴趣的:(WEB开发)