fancyBox中文文档教程.docx

fancyBox中文文档教程.docx

《fancyBox中文文档教程.docx》由会员分享，可在线阅读，更多相关《fancyBox中文文档教程.docx（20页珍藏版）》请在冰点文库上搜索。

fancyBox中文文档教程

fancyBox中文文档

fancyBox为您的网页提供惊艳的缩放功能，同时支持图片、网页内容以及各种多媒体文件。

她基于目前最流行的jQuery框架开发，不仅易于应用，而且可以定制。

欢迎来到fancyBox的世界~

∙更新日志

∙快速入门

∙常见用法

∙官方演示

∙使用许可&下载地址

∙完整API

∙常见问题

更新日志

重大变更

∙可扩展的幻灯片导航工具

∙响应式（调整浏览器窗口大小时自适应窗口大小）

∙集成幻灯片图片播放功能

∙新增幻灯片过渡效果

∙引入CSS3阴影、圆角特效

∙新的插件选项（与之前版本不兼容）

∙改用 知识共享署名-非商业性使用3.0 许可协议授权

即将上线

∙WordPress小插件

∙重构本站及API文档

∙完善缩略图浏览工具

∙fancyBox手机版（待定）

∙fancyBox3.0

↑回顶部

快速入门

1.下载fancyBox，解压后根据需要将文件复制到网页文件夹中（建议不要更改目录结构），并在网页源码中引入相应的css样式和js文件（如果更改了目录结构，引入的时候请调整相应代码，对应它们所在的路径）。

注意：

别忘了还要先加载jQuery库！

推荐使用公共库：

XX | 新浪。

示例代码：

--加载jQuery库（必须）-->

--引入fancyBox核心文件（必须）-->

--引入mousewheel插件（可选，如果想通过鼠标滚轮控制图片播放则必须）-->

--根据需要引入浏览工具：

按钮式，缩略图式和/或多媒体工具（可选，详见下方“官方演示”中的“浏览工具”部分）-->

--按钮式需要引入以下2个文件-->

v=1.0.5"type="text/css"media="screen"/>

--缩略图式需要引入以下2个文件-->

v=1.0.7"type="text/css"media="screen"/>

--多媒体工具需要引入以下文件-->

2.给触发fancyBox特效的元素（如一张缩略图或“点击我”三个字）加上a链接，并将其href属性值设置为遮罩层中需要展示的文件的链接（如刚刚那张缩略图的原图的网址）。

示例代码：

3.使页面加载完毕时初始化fancybox（）函数。

如果你不懂jQuery但英语还行，请看官方推荐的新手教程。

英语不好肿么办？

请点右上角的红叉...因为暂时找不到中文版的帮助文档。

示例代码：

$（document）.ready（function（）{

$（".fancybox"）.fancybox（）;

}）;

好了，你已经学会使用fancyBox了，新技能Get！

↑回顶部

常见用法

每一个链接都有对应的源码可供参考

1.更改遮罩层的颜色和透明度

2.去除白色边框

3.切换图片时使用淡出效果

4.为全部图片添加fancyBox特效

5.关闭fancyBox后刷新页面

6.霸屏模式（姑且这么叫吧-_-#）

7.调用YouTubeAPI-当前视频播放完时自动播放下一个

8.在iframe中打开PDF文件

9.禁用锁定模式 -默认会锁定遮罩层中的内容

10.圆点式浏览工具（类似于轮播）

11.保护版权：

禁止右键点击（添加水印）

12.和title相关的：

o通过添加属性值自定义title

o读取并显示缩略图的"alt"属性值 -默认是显示其"title"属性值

o调用内联div作为title显示

otitle显示在白框外，图片下方

otitle显示在白框内，图片上方

o禁用title

o在title中加入其他内容（如下载链接）

o鼠标悬停时显示title

13.去除两边的导航小箭头：

o全部去除

o仅去除"iframe"的

14.自定义内容：

o显示社交图标（只能Twitter或Facebook）

o添加自定义图标（如全屏图标）

o附加自定义内容

o其他网站的富媒体

15.只用一张缩略图触发相册：

o方案一：

隐藏其他缩略图（多个相册）

o方案二：

在js代码中传入其他图片的链接（多个相册）

16.页面加载完毕自动打开fancyBox：

o方案一：

触发任一元素（真不是错别字，请体会“任一”和“任意”的区别）

o方案二：

通过js触发

17.单独设置参数（比如高度、宽度）：

o通过HTML5data属性

o通过URL链接传递参数

o通过元数据（metadata）

o通过元素的ID，用js控制

↑回顶部

官方演示

你也可以直接到 这里 查看网页的源代码。

∙单张图片

∙HTML

∙JavaScript

$（document）.ready（function（）{

$（"#single_1"）.fancybox（{

helpers:

{

title:

{

type:

'float'

}

}

}）;

$（"#single_2"）.fancybox（{

openEffect:

'elastic',

closeEffect:

'elastic',

helpers:

{

title:

{

type:

'inside'

}

}

}）;

$（"#single_3"）.fancybox（{

openEffect:

'none',

closeEffect:

'none',

helpers:

{

title:

{

type:

'outside'

}

}

}）;

$（"#single_4"）.fancybox（{

helpers:

{

title:

{

type:

'over'

}

}

}）;}）;

注意：

每个元素的ID属性值不能重复

要使多张图片构成相册，请为不同的图片设置相同的"data-fancybox-group"或"rel"属性值。

如下所示：

∙图片相册

∙HTML

∙JavaScript

fancyBox通过"href"或"data-fancybox-href"的属性值来获取要加载的元素，同时判定其MIME类型。

你可以通过给元素添加"fancybox.image"、"fancybox.iframe"等css类或通过设置"data-fancybox-type"的属性值来直接指定文件的类型。

要设置元素的title描述请设置"title"或"data-fancybox-title"的属性值。

∙其他类型

∙HTML

∙JavaScript

∙Ajax数据

∙Iframe

∙内联层

∙swf文件

∙Youtube视频（iframe）

∙Google地图（iframe）

∙不存在的链接

或者，可以在初始化fancybox（）函数的js代码中直接传入参数，指定元素的MEMI类型，例如指定"open_ajax"类的元素均为"ajax"类型：

$（".open_ajax"）.fancybox（{type:

'ajax'}）;.

注意：

ajax请求遵循 同源策略，也就是说不能跨域访问。

浏览工具

注意：

只有加载了相应文件以后浏览工具才会生效。

∙按钮式浏览工具

∙HTML

∙JavaScript

∙缩略图式浏览工具

∙HTML

∙JavaScript

∙多媒体浏览工具

∙HTML

∙JavaScript

该工具会自动将网址中包含的视频、音乐、图片等嵌入遮罩层中，而不是将链接指向的整个网页以iframe的形式打开。

可惜大部分只支持墙外站点，优酷、土豆等均无法使用。

∙Youtube

∙优酷（经测试无效）

∙Vimeo

∙Metacafe

∙Dailymotion

∙Twitvid

∙Twitpic

∙Instagram

∙Google地图

o地点搜索结果

o显示某个地方

o谷歌街景

↑回顶部

使用许可&下载地址

fancyBox采用 知识共享署名-非商业性使用3.0 许可协议授权。

对于个人网站和非营利性网站，你可以免费使用。

如需商用，请 点击这里 购买授权。

最新的源码可以通过 GitHub 获取。

↑回顶部

完整API

∙可用参数

∙API函数

∙回调函数

你可以通过键/值对象的形式将参数传递给fancybox（）。

你也可以直接修改js文件中的源码或通过 $.fancybox.defaults 覆盖默认配置。

参数名

参数值&简介

padding

浏览框的内边距。

可以通过数组的形式设定-[top,right,bottom,left]

整数/数组；默认值：

15

margin

浏览框的外边距。

可以通过数组的形式设定-[top,right,bottom,left]。

如果浏览框中内容的大小超出浏览器视区，则右外边距和底外边距自动失效

整数/数组；默认值：

20

width

iframe和swf文件的默认宽度。

对于'autoSize'值为'false'的内联文本、ajax数据以及html页面同样可以通过它设定宽度。

可以是具体的数值或者'auto'

数字/字符串；默认值：

800

height

iframe和swf文件的默认高度。

对于'autoSize'值为'false'的内联文本、ajax数据以及html页面同样可以通过它设定高度。

可以是具体的数值或者'auto'

数字/字符串；默认值：

600

minWidth

自适应窗口大小时的最小宽度

数字；默认值：

100

minHeight

自适应窗口大小时的最小高度

数字；默认值：

100

maxWidth

自适应窗口大小时的最大宽度

数字；默认值：

9999

maxHeight

自适应窗口大小时的最大高度

数字；默认值：

9999

autoSize

是否自适应内容的宽高。

若为true，则autoHeight和autoWidth的值自动设为true

布尔值；默认值：

true

autoHeight

是否自动调节高度。

若为true，则内联文本、ajax数据以及html页面的宽度（不知道原作者是不是和下面写反了...）自动调节

布尔值；默认值：

false

autoWidth

是否自动调节宽度。

若为true，则内联文本、ajax数据以及html页面的高度（不知道原作者是不是和上面写反了...）自动调节

布尔值；默认值：

false

autoResize

是否自适应窗口变化。

若为true，则窗口大小发生改变时自动适应其大小

布尔值；默认值：

!

isTouch

autoCenter

是否自动居中。

若为true，则浏览框始终处于视区中心

布尔值；默认值：

!

isTouch

fitToView

是否自适应视区。

若为true，则在打开之前会自适应视区的大小。

（好吧，其实这个我没看懂...关键是作者没有demo啊...）

布尔值；默认值：

true

aspectRatio

是否保持长宽比。

若为true，则自适应窗口大小时保持长宽比不变（对于图像，长宽比始终不变；对于其他类型文件，参考 这里 更改长宽比）

布尔值；默认值：

false

topRatio

纵向位置系数。

如果值为0.5，则纵向居中。

如果值为0，则居顶

数字；默认值：

0.5

leftRatio

横向位置系数。

如果值为0.5，则横向居中。

如果值为0，则居左

数字；默认值：

0.5

scrolling

显示或隐藏滚动条，可以设为'auto'、'yes'、'no'或者'visible'

字符串；默认值：

'auto'

wrapCSS

为遮罩层自定义css

字符串；默认值：

无

arrows

是否显示两侧导航小箭头，true为显示

布尔值；默认值：

true

closeBtn

是否显示关闭图标，true为显示

布尔值；默认值：

true

closeClick

是否单击关闭。

若为true，则当用户点击浏览框内时会关闭fancyBox

布尔值；默认值：

false

nextClick

是否单击继续。

若为true，则当用户点击浏览框内时会显示下一个内容

布尔值；默认值：

false

mouseWheel

是否响应鼠标滚轮操作。

若为true，则用户可以用鼠标滚轮控制播放

布尔值；默认值：

true

autoPlay

是否自动播放。

若为true，则打开遮罩层后自动进入幻灯片模式播放

布尔值；默认值：

false

playSpeed

幻灯片播放速度。

单位：

毫秒

整数；默认值：

3000

preload

预加载图片的数量

整数；默认值：

3

modal

是否关闭导航小箭头和关闭按钮的显示

布尔值；默认值：

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',//pagedown

39:

'left',//rightarrow

40:

'up'//downarrow

//下一个：

回车，PageDown，→，↓

},

prev:

{

8:

'right',//backspace

33:

'down',//pageup

37:

'right',//leftarrow

38:

'down'//uparrow

//上一个：

退格，PageUp，←，↑

},

close:

[27],//escapekey

//关闭：

ESC

play:

[32],//space-start/stopslideshow

//开始/暂停：

空格

toggle:

[70]//letter"f"-togglefullscreen

//全屏/退出全屏：

F}

direction

导航小箭头的默认方向

对象；默认值：

{

{

next:

'left',

prev:

'right'

}}

scrollOutside

若为true，则浏览框将尽量避免出现横向滚动条。

适用于iframe和html

布尔值；默认值：

true

index

设定从第几个对象开始播放（从0开始计数）

整数；默认值：

0

type

设定MEMI类型。

支持设置为'image'、'inline'、'ajax'、'iframe'、'swf'和'html'

字符串；默认值：

null

href

覆盖要显示内容的链接

字符串；默认值：

null

content

覆盖要显示的内容

字符串；默认值：

null

title

覆盖title描述，支持使用html

字符串；默认值：

null

tpl

设定包含多个模板的对象

对象；默认值：

{

wrap:

'