(注:刚发现fancyBox出2.0了,效果比一代炫很多,并提供了一些类似lightbox的图片自动播放效果,鼠标滚轮效果等等。本文主要是翻译一下官方文档。)

官方网址:http://fancyapps.com/fancybox

官方下载地址:https://github.com/fancyapps/fancyBox/zipball/v2.1.3

本站下载地址:http://www.fayfox.com/file/download/id/19

(截止本文发布,所有站外链接亲测有效)

参数


padding

内边距,可以以数组的方式设定-[top, right, bottom, left]

整型,数组;默认值:15

margin

viewport 与 fancyBox间的最小距离,可以为数组-[top, right, bottom, left]。如果内容大小超过viewport大小,则右边距和下边距将被忽略。

整型,数组;默认值:20

width

iframe或swf的宽度,如果autoSize被设为false,则亦可为inline,ajax或者hml设定宽度,可以是数字或者'auto'

数字,字符串;默认值:800

height

iframe或swf的高度,如果autoSize被设为false,则亦可为inline,ajax或者hml设定高度,可以是数字或者'auto'

数字,字符串;默认值:600

minWidth

fancyBox所允许的最小宽度

数字;默认为:100

minHeight

fancyBox所允许的最小高度

数字;默认为:100

maxWidth

fancyBox所允许的最大宽度

数字;默认为:9999

maxHeight

fancyBox所允许的最大高度

数字;默认为:9999

autoSize

如果设为true,则autoHeight和autoWidth均为true

布尔型;默认为:true

autoHeight

如果设为true,则inline,ajax和html类型的内容会自动设置宽度。如果没有设定,可能会出现不可预知的结果

布尔型;默认为:false

autoWidth

如果设为true,则inline,ajax和html类型的内容会自动设置高度。如果没有设定,可能会出现不可预知的结果

布尔型;默认为:false

autoResize

如果设为true,这浏览器改变大小后,fancyBox亦将自动改变大小。

布尔型;默认为:!isTouch

autoCenter

如果设为true,则fancyBox始终居中

布尔型;默认为:!isTouch

fitToView

如果设为true,则在fancyBox弹出前,fancyBox会自动根据内容调整大小

布尔型;默认为:true

aspectRatio

如果设为true,则在改变弹出框大小时,会保持原比例(图片始终保持原比例)

布尔型;默认为:false

topRatio

leftRatio

scrolling

设置css的overflow属性。可选值:auto,yes,no 或 visible

字符串;默认为:auto

wrapCSS

自定义最外层元素的class(用于自定义式样)

字符串;默认为:空

arrows

如果设为true,则导航箭头会被显示

布尔型;默认为:true

closeBtn

如果设为true,则关闭按钮会被显示

布尔型;默认为:true

closeClick

如果设为true,当用户点击内容时,fancyBox将关闭

布尔型;默认为:false

nextClick

如果设为true,当用户点击内容时,将会显示幻灯片的下一页

布尔型;默认为:false

mouseWheel

如果设为true,将可以用鼠标滚轮实现幻灯片的上一页下一页切换

布尔型;默认为:true

autoPlay

如果设为true,则幻灯片将自动播放

布尔型;默认为:false

playSpeed

播放速度,单位(毫秒)

整型;默认为:3000

preload

预加载的图片数

整型;默认为3

modal

如果设为true,将无法导航和关闭

布尔型;默认为:false

loop

如果设为true,幻灯片将循环播放

布尔型;默认为:true

ajax

ajax请求的参数

对象;默认为:

{
	dataType : 'html',
	headers  : { 'X-fancyBox': true }
}
iframe

类型为iframe时所带的参数

对象;默认为:

{
	scrolling : 'auto',
	preload   : true
}


swf

类型为swf时所带的参数

对象;默认为:

{
	wmode: 'transparent',
	allowfullscreen   : 'true',
	allowscriptaccess : 'always'
}


keys

定义键盘按键对应的幻灯片操作

对象;默认为:


{
	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

默认的图片滚动方向

对象;默认为:


{
	{
		next : 'left',
		prev : 'right'
	}
}


scrollOutside

如果设为true,将试图阻止iframe和html内容出现水平滚动条

布尔型;默认为:true

index

初始幻灯片需要

整型;默认为:0

type

设置内容的类型。支持的类型:image,inline,ajax,iframe,swf和html

字符串;默认为:null(译者注:默认会自动判断类型,比如href的结尾是.jpg则认为是图片,是#div1则认为是html等)

href

重写超链接中的href值

字符串;默认为:null

content

重写要显示的content内容

字符串;默认为:null

title

重写title,接受任何html元素

字符串;默认为:null

tpl

模板

对象;默认为:

{
	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

动画效果('elastic', 'fade' or 'none')

字符串;默认为 'fade', 'fade', 'elastic', 'elastic'

openSpeed / closeSpeed / nextSpeed / prevSpeed

动画效果的持续时间(毫秒数或slow,normal,fast)

整型;默认为:250

openEasing / closeEasing / nextEasing / prevEasing

easing方法的一些效果,需要相关插件支持(译者注:jquery的一些效果)

字符串;默认为:swing

openOpacity / closeOpacity

如果设为ture,动画效果会伴随着透明度的变化

布尔型;默认为:true

openMethod / closeMethod / nextMethod / prevMethod

helpers

包含助手类参数的一个对象

对象;默认为:

{
	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

如果设为true,则fancyBox会用live去绑定click事件。如果只想绑定当前文档,请设为false。(译者注:jquery的.click(function(){});和live("click", function(){})绑定)

布尔值;默认为:true

parent

容器的父级元素。在ASP.NET里很有用。

字符串;默认为:body


Helpers

helpers用户扩展fancyBox。fancyBox有两个内置的helpers:overlay和title。你可以禁用,修改他们,也可以添加自己的helpers

//禁用标题helper
$(".fancybox").fancybox({
    helpers:  {
        title:  null
    }
});

//禁用overlay helper(overlay就是半透明的那个覆盖的玩意儿,不知道怎么翻译)
$(".fancybox").fancybox({
    helpers:  {
        overlay : null
    }
});

//改变标题位置;当内容加载完成后再显示overlay
$(".fancybox").fancybox({
    helpers:  {
        title : {
            type : 'inside'
        },
        overlay : {
            showEarly : false
        }
    }
});

//启用缩略图helper,并设置参数
$(".fancybox").fancybox({
    helpers:  {
        thumbs : {
            width: 50,
            height: 50
        }
    }
});