Fancybox
Fancybox的API和配置选项说明
属性名 | 默认值 | 简要说明 |
---|---|---|
padding | 10 | 浏览框内边距,和css中的padding一个意思 |
margin | 20 | 浏览框外边距,和css中的margin一个意思 |
opacity | false | 如果为true,则fancybox在动画改变的时候透明度可以跟着改变 |
modal | false | 如果为true,则'overlayShow' 会被设成 'true' , 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 会被设成 'false' |
cyclic | false | 如果为true,相册会循环播放 |
scrolling | 'auto' | 设置overflow的值来创建或隐藏滚动条,可以设置成 'auto', 'yes', or 'no' |
width | 560 | 设置iframe和swf的宽度,如果 'autoDimensions'为 'false',这也可以设置普通文本的宽度 |
height | 340 | 设置iframe和swf的高度,如果 'autoDimensions'为 'false',这也可以设置普通文本的高度 |
autoScale | true | 如果为true,fancybox可以自适应浏览器窗口大小 |
autoDimensions | true | 在内联文本和ajax中,设置是否动态调整元素的尺寸,如果为true,请确保你已经为元素设置了尺寸大小 |
centerOnScroll | false | 如果为true,当你滚动滚动条时,fancybox将会一直停留在浏览器中心 |
ajax | { } | 和jquery的ajax调用选项一样 注意: 'error' and 'success' 这两个回调事件会被fancybox重写 |
swf | {wmode: 'transparent'} | swf的设置选项 |
hideOnOverlayClick | true | 如果为true则点击遮罩层关闭fancybox |
hideOnContentClick | false | 如果为true则点击播放内容关闭fancybox |
overlayShow | true | 如果为true,则显示遮罩层 |
overlayOpacity | 0.3 | 遮罩层的透明度(范围0-1) |
overlayColor | '#666' | 遮罩层的背景颜色 |
titleShow | true | 如果为true,则显示标题 |
titlePosition | 'outside' | 设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over' |
titleFormat | null | 可以自定义标题的格式 |
transitionIn, transitionOut | 'fade' | 设置动画效果. 可以设置为 'elastic', 'fade' 或 'none' |
speedIn, speedOut | 300 | fade 和 elastic 动画切换的时间间隔, 以毫秒为单位 |
changeSpeed | 300 | 切换时fancybox尺寸的变化时间间隔(即变化的速度),以毫秒为单位 |
changeFade | 'fast' | 切换时内容淡入淡出的时间间隔(即变化的速度) |
easingIn, easingOut | 'swing' | 为 elastic 动画使用 Easing |
showCloseButton | true | 如果为true,则显示关闭按钮 |
showNavArrows | true | 如果为true,则显示上一张下一张导航箭头 |
enableEscapeButton | true | 如果为true,则启用ESC来关闭fancybox |
onStart | null | 回调函数,加载内容是触发 |
onCancel | null | 回调函数,取消加载内容后触发 |
onComplete | null | 回调函数,加载内容完成后触发 |
onCleanup | null | 回调函数,关闭fancybox前触发 |
onClosed | null | 回调函数,关闭fancybox后触发 |
fancyBox2中文文档http://doc.bropaul.com/fancyBox/
fancyBox 为您的网页提供惊艳的缩放功能,同时支持图片、网页内容以及各种多媒体文件。
她基于目前最流行的 jQuery 框架开发,不仅易于应用,而且可以定制。欢迎来到 fancyBox 的世界~
更新日志
重大变更
- 多样化(可供选择的幻灯片浏览工具)
- 智能化(打开浏览框的时候会自动适应窗口大小)
- 集成化(集成幻灯片播放图片功能)
- 全新化(全新的幻灯片转场效果)
- 现代化(引入CSS3阴影、圆角特效)
- 完善化(更新插件选项,但可能与之前版本不兼容)
- 依旧免费(但现在采用 知识共享署名-非商业性使用3.0 许可协议授权)
即将上线
- WordPress小插件
- 更新本站及官方文档
- 改善缩略图浏览工具
- fancyBox 手机版(可能)
- fancyBox 3.0
使用说明
下载fancyBox压缩文档,解压后将需要的文件复制到网页文件夹中,并在网页中引入相应的css样式和js文件。
注意:这一切的前提是,你的网页引入了jQuery库!示例:
<!-- 引入jQuery库 --><scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.min.js"></script><!-- 引入鼠标滚轮控制插件(可选) --><scripttype="text/javascript"src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script><!-- 引入fancyBox文件(必须) --><linkrel="stylesheet"href="/fancybox/source/jquery.fancybox.css?v=2.1.4"type="text/css"media="screen"/><scripttype="text/javascript"src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script><!-- 引入不同的幻灯片浏览工具:按钮,缩略图和/或多媒体(可选) --><linkrel="stylesheet"href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5"type="text/css"media="screen"/><scripttype="text/javascript"src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script><scripttype="text/javascript"src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script><linkrel="stylesheet"href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7"type="text/css"media="screen"/><scripttype="text/javascript"src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
给需要使用fancyBox特效打开的元素(比如小图)加一层a链接,并将其href属性值设置为打开后文件的地址(比如大图)。
<aclass="fancybox"rel="group"href="big_image_1.jpg"><imgsrc="small_image_1.jpg"alt=""/></a><aclass="fancybox"rel="group"href="big_image_2.jpg"><imgsrc="small_image_2.jpg"alt=""/></a>
页面加载完毕时载入fancyBox。如果你不懂jQuery但英语还行,请看官方推荐的新手教程。英语不好肿么办?请点右上角的红叉...因为暂时找不到中文版的帮助文档
<scripttype="text/javascript"> $(document).ready(function(){ $(".fancybox").fancybox();});</script>
小贴士&小技巧
每一个链接都有对应的源码可供参考
- 更改遮罩层的颜色和透明度
- 更改title的位置
- 禁用title
- 保护版权: 禁止右键点击 (添加水印)
- 去除白色边框
- 去除两边的导航小箭头:
- 自定义title:
- 通过不同的属性值设置title(比如caption)
- 通过网页标签设置title(比如div)
- 在fancyBox中加入自定义内容
- 切换图片时使用淡出效果
- 将fancyBox应用于全部图片
- 一个相册仅显示一张缩略图:
- 页面加载完毕自动启用fancyBox:
- 方案一:触发任一元素(真不是错别字,请体会“任一”和“任意”的区别)
- 方案二:手动打开相册
- 加入社交图标 (Twitter和Facebook神马的)
- 关闭fancyBox后刷新页面
- 单独设置属性(比如高度、宽度):
- 霸屏模式(姑且这么叫吧-_-#)
- 调用YouTube API - 当前视频播放完时自动播放下一个
官方示例
你也可以直接到 这里 查看网页的源代码。
注意:每个元素的ID属性值不能重复
当元素拥有相同的 "data-fancybox-group" 或 "rel" 属性值时,就构成了一个相册。
fancyBox通过"href"或"data-fancybox-href"的属性值来获取要加载的元素以及其文件类型。你可以通过给元素添加fancybox.image、 fancybox.iframe等css类或设置"data-fancybox-type "的属性值来直接指定文件的类型。要设置元素的描述请使用 "title"或者"data-fancybox-title"属性。
或者,you can set content type as an option: $(".open_ajax").fancybox({type: 'ajax'});
.
(这一段由于不懂ajax,我就不乱翻译了...)
注意:ajax请求遵循 同源政策,也就是说不能跨域访问。
扩展功能
使用许可&下载地址
fancyBox 采用 知识共享署名-非商业性使用3.0 许可协议授权。
对于个人网站和非营利性网站,你可以免费使用。
如需商用,请 点击这里 购买授权。
最新的源码可以通过 GitHub 获取。
官方文档
你可以通过键/值对象的形式将配置传递给fancybox()方法。你也可以直接在js文件中修改或通过 $.fancybox.defaults
设定默认配置。
名称 | 介绍 |
---|---|
padding | 浏览框内边距,和css中的padding一个意思。可以通过数组的形式设定 - [top, right, bottom, left]。 整数/数组; 默认值:15 |
margin | 浏览框外边距,和css中的margin一个意思。可以通过数组的形式设定 - [top, right, bottom, left]。如果fancyBox中的内容大小超出视口,则右边距和底边距会被忽略。 整数/数组; 默认值:20 |
width | 设置iframe和swf的默认宽度,如果 'autoSize'值为 'false',则可以设置内联文本、ajax数据以及html页面的宽度。可以是具体的数值或者'auto'。 数字/字符串; 默认值:800 |
height | 设置iframe和swf的默认高度,如果 'autoSize'值为 'false',则可以设置内联文本、ajax数据以及html页面的高度。可以是具体的数值或者'auto'。 数字/字符串; 默认值:600 |
minWidth | fancyBox适应窗口大小的最小宽度 数字; 默认值:100 |
minHeight | fancyBox适应窗口大小的最小高度 数字; 默认值: 100 |
maxWidth | fancyBox适应窗口大小的最大宽度 数字; 默认值:9999 |
maxHeight | fancyBox适应窗口大小的最大高度 数字; 默认值:9999 |
autoSize | 自适应窗口大小。若为true,则 autoHeight 和 autoWidth 的值自动设为true 布尔值;默认值:true |
autoHeight | 自动调节高度。若为true,则内联文本、ajax数据以及html页面的宽度(不知道原作者是不是写反了...)自动调节。 布尔值;默认值:false |
autoWidth | 自动调节宽度。若为true,则内联文本、ajax数据以及html页面的高度(不知道原作者是不是写反了...)自动调节。 布尔值;默认值:false |
autoResize | 自动适应窗口变化。若为true,则窗口大小发生改变时fancyBox会自动适应。 布尔值;默认值:!isTouch |
autoCenter | 自动居中。若为true,则fancyBox始终处于窗口中心。 布尔值;默认值:!isTouch |
fitToView | 自适应视口。若为true,则fancyBox在打开之前就会自动调节以适应视口的大小。(好吧,其实这个我没看懂...关键是作者没有demo啊...) 布尔值;默认值:true |
aspectRatio | 长宽比恒定。若为true,则自适应窗口大小时保持长宽比不变(对于图像,长宽比始终不变)。 布尔值;默认值:false |
topRatio | 设定纵向位置。如果值为0.5,则居中。如果值为0,则居顶部。 数字;默认值:0.5 |
leftRatio | 设定横向位置。如果值为0.5,则居中。如果值为0,则居左边。 数字;默认值:0.5 |
scrolling | 设置overflow的值来创建或隐藏滚动条,可以设置成 '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 | 若为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(ESC) play :[32],// space(空格键) - 开始/暂停 toggle :[70]// letter "f"(f) - 切换全屏} |
direction | 导航小箭头的默认方向 对象;默认值: {{next:'left', prev :'right'}} |
scrollOutside | 若为true,则浏览框将尽量避免出现横向滚动条。适用于iframe和html。 布尔值;默认值:true |
index | 设置从第几个对象开始播放 整数;默认值: 0 |
type | 设置对象的文件类型。优先级最高。支持设置为'image'、 'inline'、 'ajax'、 'iframe'、'swf' 和 'html' 字符串;默认值:null |
href | 设置对象的源地址。优先级最高。 字符串;默认值:null |
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' 或 'none'。 字符串;默认值:'fade', 'fade', 'elastic', 'elastic' |
openSpeed / closeSpeed / nextSpeed / prevSpeed | 设置相应动画效果(左边从上到下依次是打开、关闭、下一个、上一个)的时间。单位:毫秒。或者直接用 "slow"、"normal" 或 "fast" 整数/字符串;默认值:250 |
openEasing / closeEasing / nextEasing / prevEasing | 设置相应事件(左边从上到下依次是打开、关闭、下一个、上一个)的Easing效果。需引入Easing插件 字符串;默认值:'swing' |
openOpacity / closeOpacity | 若为true,则打开和关闭时会有透明度的过渡。 布尔值;默认值:true |
openMethod / closeMethod / nextMethod / prevMethod | 从 $.fancybox.transitions() 调用相应事件(左边从上到下依次是打开、关闭、下一个、上一个)的过渡方法(可以自行添加) 字符串;默认值:'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut' |
helpers | 若启用了扩展功能,则通过这个属性配置 对象;默认值: { overlay :{ closeClick :true,// 若为true,则当用户点击遮罩层时会自动关闭fancyBox speedOut :200,// 淡出动画的间隔,单位:毫秒 showEarly :true,// 先打开fancyBox还是等内容加载完毕再打开 css :{},// 自定义 CSS 属性 locked :true// 若为true,则内容会被锁定在遮罩层中}, title :{ type :'float'// title的位置,可选 'float'、 'inside'、'outside' 或 'over'}} |
live | If 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();布尔值;默认值:true |
parent | Parent element of the container. This is useful for ASP.NET where the top element is "form" - (呃...我又看不懂了...求指教>.<) $(".fancybox").fancybox({ parent:"form:first"// jQuery选择器});字符串;默认值: body |
浏览工具
浏览工具的引入为fancyBox增色不少。fancyBox内置两套工具——遮罩层和title。你可以禁用它们、自定义它们或者启用其他的工具。例如:
//禁用title $(".fancybox").fancybox({ helpers:{ title:null}});//禁用遮罩层 $(".fancybox").fancybox({ helpers:{ overlay :null}});//更改title的位置;对象加载完毕以后再显示遮罩层 $(".fancybox").fancybox({ helpers:{ title :{ type :'inside'}, overlay :{ showEarly :false}}});//启用缩略图工具,并自定义参数 $(".fancybox").fancybox({ helpers:{ thumbs :{ width:50, height:50}}});
缩略图工具配置选项
名称 | 介绍 |
---|---|
width | 缩略图宽度 |
height | 缩略图高度 |
source | 缩略图源地址。如果不提供,默认使用a标签中的第一个图像。 例如:http://jsfiddle.net/PFVxK/, http://jsfiddle.net/2k8EP/ |
position | 缩略图位置,'top' 或 'bottom' |
按钮工具配置选项
名称 | 介绍 |
---|---|
tpl | HTML 模板 |
position | 按钮位置,'top' 或 'bottom' |
FAQs
1. 图片都是在新窗口打开的,出啥错了?
请检查是否在网页中引入了所需的相关css和js文件,尤其是jQuery,必须第一个加载(译者注)。
2. fancyBox怎么样才不会被flash遮挡?
请参考 这个帮助文档 。
3. 我能从iframe中调用fancyBox吗?
如果父窗口中引入了所需的全部文件,那么是可以的。例如:
<a href="javascript:parent.$.fancybox.open({href : 'myurl'});">点我打开</a>
4. 我怎么通过其他元素关闭fancyBox?
给其他元素添加onClick事件,并调用 $.fancybox.close() 函数即可。
5. fancyBox只对第一张图片有效,其他全部失效,这是什么情况?
可能由于你在使用ID选择器,而不是类选择器。将 $("#selector").fancybox(); 改成$(".selector").fancybox(); 即可。
posted on 2013-06-07 11:17 master2012 阅读(909) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步