master2012

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

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>

小贴士&小技巧

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

  1. 更改遮罩层的颜色和透明度
  2. 更改title的位置
  3. 禁用title
  4. 保护版权: 禁止右键点击 (添加水印)
  5. 去除白色边框
  6. 去除两边的导航小箭头:
  7. 自定义title:
  8. 在fancyBox中加入自定义内容
  9. 切换图片时使用淡出效果
  10. 将fancyBox应用于全部图片
  11. 一个相册仅显示一张缩略图:
  12. 页面加载完毕自动启用fancyBox:
  13. 加入社交图标 (Twitter和Facebook神马的)
  14. 关闭fancyBox后刷新页面
  15. 单独设置属性(比如高度、宽度):
  16. 霸屏模式(姑且这么叫吧-_-#)
  17. 调用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 获取。

下载 v2.1.4 购买商业授权

官方文档

你可以通过键/值对象的形式将配置传递给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   master2012  阅读(909)  评论(0编辑  收藏  举报

努力加载评论中...
点击右上角即可分享
微信分享提示