fancyBox中文文档教程.docx

1、fancyBox中文文档教程fancyBox 中文文档fancyBox 为您的网页提供惊艳的缩放功能，同时支持图片、网页内容以及各种多媒体文件。她基于目前最流行的 jQuery 框架开发，不仅易于应用，而且可以定制。欢迎来到 fancyBox 的世界更新日志快速入门常见用法官方演示使用许可&下载地址完整API常见问题更新日志重大变更可扩展的幻灯片导航工具响应式（调整浏览器窗口大小时自适应窗口大小）集成幻灯片图片播放功能新增幻灯片过渡效果引入CSS3阴影、圆角特效新的插件选项（与之前版本不兼容）改用知识共享署名-非商业性使用3.0许可协议授权即将上线WordPress小插件重构本站及API文档完

2、善缩略图浏览工具fancyBox 手机版（待定）fancyBox 3.0回顶部快速入门1. 下载 fancyBox，解压后根据需要将文件复制到网页文件夹中（建议不要更改目录结构），并在网页源码中引入相应的 css 样式和 js 文件（如果更改了目录结构，引入的时候请调整相应代码，对应它们所在的路径）。注意：别忘了还要先加载 jQuery 库！推荐使用公共库：XX|新浪。示例代码：2. 给触发 fancyBox 特效的元素（如一张缩略图或“点击我”三个字）加上 a 链接，并将其 href 属性值设置为遮罩层中需要展示的文件的链接（如刚刚那张缩略图的原图的网址）。示例代码：3. 使页面加载完毕时初

3、始化 fancybox() 函数。如果你不懂jQuery但英语还行，请看官方推荐的新手教程。英语不好肿么办？请点右上角的红叉.因为暂时找不到中文版的帮助文档。示例代码： $(document).ready(function() $(.fancybox).fancybox(); );好了，你已经学会使用 fancyBox 了，新技能 Get！回顶部常见用法每一个链接都有对应的源码可供参考1.更改遮罩层的颜色和透明度2.去除白色边框3.切换图片时使用淡出效果4.为全部图片添加 fancyBox 特效5.关闭 fancyBox 后刷新页面6.霸屏模式（姑且这么叫吧-_-#）7.调用YouTube A

4、PI - 当前视频播放完时自动播放下一个8.在 iframe 中打开 PDF 文件9.禁用锁定模式- 默认会锁定遮罩层中的内容10.圆点式浏览工具（类似于轮播）11.保护版权：禁止右键点击（添加水印）12.和 title 相关的：o通过添加属性值自定义 titleo读取并显示缩略图的 alt 属性值- 默认是显示其 title 属性值o调用内联 div 作为 title 显示otitle 显示在白框外，图片下方otitle 显示在白框内，图片上方o禁用 titleo在 title 中加入其他内容（如下载链接）o鼠标悬停时显示 title13.去除两边的导航小箭头：o全部去除o仅去除iframe

5、的14.自定义内容：o显示社交图标（只能Twitter或Facebook）o添加自定义图标（如全屏图标）o附加自定义内容o其他网站的富媒体15.只用一张缩略图触发相册：o方案一：隐藏其他缩略图（多个相册）o方案二：在 js 代码中传入其他图片的链接（多个相册）16.页面加载完毕自动打开fancyBox：o方案一：触发任一元素（真不是错别字，请体会“任一”和“任意”的区别）o方案二：通过 js 触发17.单独设置参数（比如高度、宽度）：o通过 HTML5 data 属性o通过 URL 链接传递参数o通过元数据（metadata）o通过元素的ID，用js控制回顶部官方演示你也可以直接到这里查看网页

6、的源代码。单张图片HTMLJavaScript$(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 : ou

7、tside ); $(#single_4).fancybox( helpers : title : type : over ););注意：每个元素的 ID 属性值不能重复要使多张图片构成相册，请为不同的图片设置相同的 data-fancybox-group 或 rel 属性值。如下所示：图片相册HTMLJavaScriptfancyBox 通过 href 或 data-fancybox-href 的属性值来获取要加载的元素，同时判定其 MIME 类型。你可以通过给元素添加 fancybox.image、 fancybox.iframe 等 css 类或通过设置 data-fancybox-ty

8、pe 的属性值来直接指定文件的类型。要设置元素的title描述请设置 title 或 data-fancybox-title 的属性值。其他类型HTMLJavaScriptAjax数据Iframe内联层swf文件Youtube视频 (iframe)Google地图 (iframe)不存在的链接或者，可以在初始化 fancybox() 函数的 js 代码中直接传入参数，指定元素的 MEMI 类型，例如指定 open_ajax 类的元素均为 ajax 类型：$(.open_ajax).fancybox(type: ajax);.注意：ajax 请求遵循同源策略，也就是说不能跨域访问。浏览工具注意：

9、只有加载了相应文件以后浏览工具才会生效。按钮式浏览工具HTMLJavaScript缩略图式浏览工具HTMLJavaScript多媒体浏览工具HTMLJavaScript该工具会自动将网址中包含的视频、音乐、图片等嵌入遮罩层中，而不是将链接指向的整个网页以 iframe 的形式打开。可惜大部分只支持墙外站点，优酷、土豆等均无法使用。Youtube优酷（经测试无效）VimeoMetacafeDailymotionTwitvidTwitpicInstagramGoogle地图o地点搜索结果o显示某个地方o谷歌街景回顶部使用许可&下载地址fancyBox 采用知识共享署名-非商业性使用3.0许可协议授

10、权。对于个人网站和非营利性网站，你可以免费使用。如需商用，请点击这里购买授权。最新的源码可以通过GitHub获取。回顶部完整API可用参数API 函数回调函数你可以通过键/值对象的形式将参数传递给 fancybox()。你也可以直接修改 js 文件中的源码或通过$.fancybox.defaults覆盖默认配置。参数名参数值&简介padding浏览框的内边距。可以通过数组的形式设定 - top, right, bottom, left整数/数组； 默认值：15margin浏览框的外边距。可以通过数组的形式设定 - top, right, bottom, left。如果浏览框中内容的大小超出浏览

11、器视区，则右外边距和底外边距自动失效整数/数组； 默认值：20widthiframe 和 swf 文件的默认宽度。对于 autoSize 值为 false 的内联文本、ajax数据以及html页面同样可以通过它设定宽度。可以是具体的数值或者auto数字/字符串； 默认值：800heightiframe 和 swf 文件的默认高度。对于 autoSize 值为 false 的内联文本、ajax数据以及html页面同样可以通过它设定高度。可以是具体的数值或者auto数字/字符串； 默认值：600minWidth自适应窗口大小时的最小宽度数字； 默认值：100minHeight自适应窗口大小时的最小

12、高度数字； 默认值： 100maxWidth自适应窗口大小时的最大宽度数字； 默认值：9999maxHeight自适应窗口大小时的最大高度数字； 默认值：9999autoSize是否自适应内容的宽高。若为 true，则 autoHeight 和 autoWidth 的值自动设为 true布尔值；默认值：trueautoHeight是否自动调节高度。若为 true，则内联文本、ajax 数据以及 html 页面的宽度（不知道原作者是不是和下面写反了.）自动调节布尔值；默认值：falseautoWidth是否自动调节宽度。若为 true，则内联文本、ajax 数据以及 html 页面的高度（不知道

13、原作者是不是和上面写反了.）自动调节布尔值；默认值：falseautoResize是否自适应窗口变化。若为 true，则窗口大小发生改变时自动适应其大小布尔值；默认值：!isTouchautoCenter是否自动居中。若为 true，则浏览框始终处于视区中心布尔值；默认值：!isTouchfitToView是否自适应视区。若为 true，则在打开之前会自适应视区的大小。（好吧，其实这个我没看懂.关键是作者没有demo啊.）布尔值；默认值：trueaspectRatio是否保持长宽比。若为 true，则自适应窗口大小时保持长宽比不变（对于图像，长宽比始终不变；对于其他类型文件，参考这里更改长宽比

14、）布尔值；默认值：falsetopRatio纵向位置系数。如果值为0.5，则纵向居中。如果值为0，则居顶数字；默认值：0.5leftRatio横向位置系数。如果值为0.5，则横向居中。如果值为0，则居左数字；默认值：0.5scrolling显示或隐藏滚动条，可以设为 auto、yes、no 或者 visible字符串；默认值：autowrapCSS为遮罩层自定义 css字符串；默认值：无arrows是否显示两侧导航小箭头，true 为显示布尔值；默认值：truecloseBtn是否显示关闭图标，true 为显示布尔值；默认值：truecloseClick是否单击关闭。若为 true，则当用户点

15、击浏览框内时会关闭 fancyBox布尔值；默认值：falsenextClick是否单击继续。若为 true，则当用户点击浏览框内时会显示下一个内容布尔值；默认值：falsemouseWheel是否响应鼠标滚轮操作。若为 true，则用户可以用鼠标滚轮控制播放布尔值；默认值：trueautoPlay是否自动播放。若为 true，则打开遮罩层后自动进入幻灯片模式播放布尔值；默认值：falseplaySpeed幻灯片播放速度。单位：毫秒整数；默认值：3000preload预加载图片的数量整数；默认值： 3modal是否关闭导航小箭头和关闭按钮的显示布尔值；默认值：falseloop是否循环播放。若

16、为 true，则当播放到最后一张图时会从第一张重新开始布尔值；默认值：trueajax设定 ajax 请求参数对象；默认值： dataType : html, headers : X-fancyBox: true iframe设定 iframe 参数对象；默认值： scrolling : auto, preload : trueswf设定 swf 文件参数对象；默认值： wmode: transparent, allowfullscreen : true, allowscriptaccess : alwayskeys设定控制和关闭幻灯片的键盘快捷键。对象；默认值： next : 13 : le

17、ft, / enter 34 : up, / page down 39 : left, / right arrow 40 : up / down arrow /下一个：回车，PageDown， , prev : 8 : right, / backspace 33 : down, / page up 37 : right, / left arrow 38 : down / up arrow /上一个：退格，PageUp， , close : 27, / escape key /关闭：ESC play : 32, / space - start/stop slideshow /开始/暂停：空格 t

18、oggle : 70 / letter f - toggle fullscreen /全屏/退出全屏：Fdirection导航小箭头的默认方向对象；默认值： next : left, prev : right scrollOutside若为 true，则浏览框将尽量避免出现横向滚动条。适用于 iframe 和 html布尔值；默认值：trueindex设定从第几个对象开始播放（从0开始计数）整数；默认值： 0type设定 MEMI 类型。支持设置为 image、inline、ajax、iframe、swf 和 html字符串；默认值：nullhref覆盖要显示内容的链接字符串；默认值：null

19、content覆盖要显示的内容字符串；默认值：nulltitle覆盖 title 描述，支持使用 html字符串；默认值：nulltpl设定包含多个模板的对象对象；默认值： wrap : , image : , iframe : , error : The requested content cannot be loaded.Please try again later., closeBtn : , next : , prev : openEffect / closeEffect / nextEffect / prevEffect设定相应事件（左边从上到下依次是打开、关闭、下一个、上一个）的动

20、画效果。可选 elastic、 fade 或 none字符串；默认值：fade, fade, elastic, elasticopenSpeed / closeSpeed / nextSpeed / prevSpeed设定相应动画效果（左边从上到下依次是打开、关闭、下一个、上一个）的时间。单位：毫秒。或者直接用 slow、normal 或 fast整数/字符串；默认值：250openEasing / closeEasing / nextEasing / prevEasing设定相应事件（左边从上到下依次是打开、关闭、下一个、上一个）的 Easing 效果。需引入 jQuery Easing 插

21、件字符串；默认值：swingopenOpacity / closeOpacity若为 true，则打开和关闭时会有透明度的过渡布尔值；默认值：trueopenMethod / closeMethod / nextMethod / prevMethod从 $.fancybox.transitions() 调用相应事件（左边从上到下依次是打开、关闭、下一个、上一个）的过渡方法（可以自行添加）字符串；默认值：zoomIn / zoomOut / changeIn / changeOuthelpers若启用了浏览工具，则通过这个对象设置参数对象；默认值： overlay : closeClick :

22、true, / 若为true，则当用户点击遮罩层时会自动关闭 fancyBox speedOut : 200, / 淡出动画的间隔，单位：毫秒 showEarly : true, / 立即打开 fancyBox 还是等内容加载完毕再打开 css : , / 自定义 CSS locked : true / 若为 true，则内容会被锁定在遮罩层中 , title : type : float / title 的位置，可选 float、 inside、outside 或 over liveIf set to true, fancyBox uses live to assign click event. Set to false, if you need to apply only to current collection, e.g., if using something like -（呃.时至今日还是看不懂.）$(#page).children().filter(a).eq(0).fancybox();布尔值；默认值：trueparent设定父元素$(.fancybox).fancybox(