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:
'
升级会员 