ujquery.fancybox api开发文档中文翻译版

2016年11月17日11:57:14

基础使用

http://fancybox.net/howto

1. 首先，请确保您使用的是有效的DOCTYPE这是FancyBox看起来和功能正确需要。

2. 包含必要的JS文件

建议从CDN加载jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

可选 - 将转换添加为jQuery默认情况下只支持“swing”和“linear”


<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>


可选 - 启用“鼠标滚轮”以浏览图库项目

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>


3. 添加FancyBox CSS文件

如果CSS文件不在同一目录中，请不要更改背景图像路径。
此外，检查AlphaImageLoader的src路径，因为它们是相对于HTML文档，而正常的CSS背景图像是相对于CSS文档（阅读更多）。

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

4. 创建链接元素（<a href>）

Images 图片

<a id="single_image" href="image_big.jpg"><img src="data:image_small.jpg" alt=""/></a>

内联内容

<a id="inline" href="#data">This shows content of element who has id="data"</a>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

Iframe

<a href="http://www.example?iframe">This goes to iframe</a>

or

<a class="iframe" href="http://www.example">This goes to iframe</a>

Ajax

<a href="http://www.example/data.php">This takes content using ajax</a>

可选 - 如果要显示标题，请使用锚点的标题属性
注意 - 如果显示iframed或inline内容并且它包含可点击的元素（例如 - 电影的播放按钮，其他页面的链接），则可能需要将hideOnContentClick设置为false，

5. Fire插件使用jQuery选择器

如果你不熟悉jQuery，请阅读本教程为初学者

Sample examples:

$(document).ready(function() {

    /* 这是基本的 - 使用默认设置 */

    $("a#single_image").fancybox();

    /* 使用自定义设置 */

    $("a#inline").fancybox({

        'hideOnContentClick': true

    });

    /* 将fancybox应用于多个项目 */

    $("a.group").fancybox({

        'transitionIn'    :    'elastic',

        'transitionOut'    :    'elastic',

        'speedIn'        :    600,

        'speedOut'        :    200,

        'overlayShow'    :    false

    });

});

注意 - ID是为SINGLE实例。如果你想为所有的图像/元素使用相同的脚本，那么使用类。
注意 - 图库是从具有相同“rel”标签的元素创建的，例如：

/* HTML */

<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="data:image_small_1.jpg" alt=""/></a>

<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="data:image_small_2.jpg" alt=""/></a>     

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="data:image_small_3.jpg" alt=""/></a>

<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="data:image_small_4.jpg" alt=""/></a> 

/* 这将创建两个画廊*/

$("a.grouped_elements").fancybox();

api参数文档

http://fancybox.net/api

此文档是给 1.3+版本使用的, for versions 1.2+ http://fancybox.net/api/126（此版本不翻译）

您可以将选项作为键/值对象传递给fancybox（）函数，或者在FancyBox JS文件底部修改它们。

键名	默认值	描述
padding	10	FancyBox包装器和内容之间的空间
margin	20	视口和FancyBox包装之间的空间
opacity	false	为真时，内容的透明度对于弹性转换而改变
modal	false	为true时，“overlayShow”设置为“true”，“hideOnOverlayClick”，“hideOnContentClick”，“enableEscapeButton”，“showCloseButton”
cyclic	false	如果为true，画廊将循环，允许您继续按下一步/后退。
scrolling	'auto'	设置溢出CSS属性以创建或隐藏滚动条。可以设置为'auto'，'yes'或'no'
width	560	内容类型“iframe”和“swf”的宽度。如果'autoDimensions'设置为'false'，还设置为内联内容
height	340	内容类型“iframe”和“swf”的高度。如果'autoDimensions'设置为'false'，还设置为内联内容
autoScale	true	如果为true，则FancyBox会缩放到适合视口
autoDimensions	true	对于inline和ajax视图，将视图调整为元素接收。确保它有尺寸，否则这将给出意想不到的结果
centerOnScroll	false	当为true时，FancyBox在滚动页面时居中
ajax	{ }	Ajax选项注意：'error'和'success'将被FancyBox覆盖
swf	{wmode: 'transparent'}	参数放上swf对象
hideOnOverlayClick	true	切换是否点击叠加层应关闭FancyBox
hideOnContentClick	false	切换是否单击内容应关闭FancyBox
overlayShow	true	切换叠加层
overlayOpacity	0.3	叠加层的不透明度（从0到1;默认为0.3）
overlayColor	'#666'	叠加层的颜色
titleShow	true	切换标题
titlePosition	'outside'	标题的位置。可以设置为“outside”，“inside”或“over”
titleFormat	null	回调自定义标题区域。您可以设置任何html - 自定义图像计数器，甚至自定义导航
transitionIn, transitionOut	'fade'	过渡类型。可以设置为'elastic'，'fade'或'none'
speedIn, speedOut	300	褪色和弹性转换的速度，以毫秒为单位
changeSpeed	300	更改图库项目时调整大小的速度（以毫秒为单位）
changeFade	'fast'	更改图库项目时内容的速度变淡
easingIn, easingOut	'swing'	松紧用于弹性动画
showCloseButton	true	切换关闭按钮
showNavArrows	true	切换导航箭头
enableEscapeButton	true	切换如果按Esc按钮关闭FancyBox
onStart	null	将在尝试加载内容之前调用
onCancel	null	将在加载后被调用取消
onComplete	null	一旦显示内容将被调用
onCleanup	null	将在关闭前调用
onClosed	null	FancyBox关闭后会被调用

键名	描述
type	强制内容类型。可以设置为'image'，'ajax'，'iframe'，'swf'或'inline'
href	强制内容源
title	强制标题
content	强制内容（可以是任何html数据）
orig	设置对象“弹性”转换将使用的位置和尺寸
index	手动创建库的自定义开始索引（自1.3.1开始）

FancyBox提供了一些功能来使用它

方法	描述
$.fancybox.showActivity	显示加载动画
$.fancybox.hideActivity	隐藏加载动画
$.fancybox.next	显示下一个图库项目
$.fancybox.prev	显示上一个图库项目
$.fancybox.pos	按照图库的索引显示项目
$.fancybox.cancel	取消加载内容
$.fancybox.close	隐藏FancyBox 在iframe use-parent中。$.fancybox.close（）;
$.fancybox.resize	自动调整FancyBox高度以匹配内容的高度
$.fancybox.center	中心FancyBox在视口

fancyBox2 文档在这个 http://fancyapps.com/fancybox/#docs

新内容

版本2完全重写了新功能和更新的图形

值得注意的变化

可扩展使用助手
响应（尝试调整窗口大小，而fancyBox是打开）
集成幻灯片
新的图库过渡
使用CSS3（阴影，圆角）
更新了插件选项（与以前的版本不兼容）
现已授权Creative Commons Attribution-NonCommercial 3.0

说明

下载插件，解压缩它，复制文件，并在你的文档中包含fancyBox脚本和样式表（你需要确保css和js文件在你的服务器上，并调整脚本和链接标签中的路径）。确保你也加载jQuery库。例：

<!-- Add jQuery library -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->

<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

创建链接元素，其href属性将包含您希望在fancyBox中打开的元素的路径。

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>

<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

当文档加载时附加fancyBox。如果你不熟悉jQuery，请阅读本教程为初学者。

<script type="text/javascript">

	$(document).ready(function() {

		$(".fancybox").fancybox();

	});

</script>

提示与技巧

A collection of the demos created in response to questions

Change overlay color and opacity
Title -
- Use different attribute as value
- Get thumbnail "alt" attribute and use it
- Use element instead of attribute
- Change title type
- Disable title
- Set title at the top
- Add something to the title (add download link)
- Stretch and show/hide on mouse hover
Disable right click (add watermark)
Remove white border around content
Move navigation arrows outside -
- For all items
- Only for type "iframe"
Customize/change the content -
- Social buttons (twitter and fb)
- Add custom icon (full-screen)
- Append custom content
- Use 3rd party script (query-Oembed-All) to embed content from other website
Fade content when changing gallery items
Apply fancyBox on all images
Start the gallery with only one preview picture:
- Method one - Hide other images (multiple galleries)
- Method two - Open fancyBox manually (multiple galleries)
Launch fancyBox on page load:
- Method one - Trigger one of the elements
- Method two - Open fancyBox manually
Reload page after closing
Set parameters (like width and height) individually -
- HTML5 data attributes
- URL parameters
- Metadata Plugin
- Based on element ID
Supersized effect
Using YouTube API - go to the next video after the current one is finished playing
Open PDF (inside iframe)
Disable "locked" feature - the content is locked in the overlay by default
Simple "dotted" navigation

回答问题时创建的示例集合

更改重叠颜色和不透明度
标题 -
使用不同的属性作为值
获取缩略图“alt”属性并使用它
使用元素而不是属性
更改标题类型
禁用标题
在顶部设置标题
向标题添加内容（添加下载链接）
拉伸和显示/隐藏鼠标悬停
禁用右键（添加水印）
删除内容周围的白色边框
移动导航箭头外 -
所有项目
仅适用于类型“iframe”
自定义/更改内容 -
社交按钮（twitter和fb）
添加自定义图标（全屏）
追加自定义内容
使用第三方脚本（query-Oembed-All）嵌入来自其他网站的内容
更改图库项目时淡出内容
在所有图片上应用fancyBox
仅使用一个预览图片启动图库：
方法一 - 隐藏其他图像（多个画廊）
方法二 - 手动打开fancyBox（多个画廊）
在网页加载时启动fancyBox：
方法一 - 触发元素之一
方法二 - 手动打开fancyBox
关闭后重新加载页面
单独设置参数（如宽度和高度）
HTML5数据属性
网址参数
元数据插件
基于元素ID
超级效果
使用YouTube API - 在当前视频播放完毕后转到下一个视频
打开PDF（在iframe中）
禁用“锁定”功能 - 内容在默认情况下锁定在叠加层中
简单的“虚线”导航

实例

您还可以直接进行操作，并打开独立版本的演示并查看其源代码。

单个图像
HTML
JavaScript

注意：ID是单次使用，并且仅应用于一个元素。
从具有相同“data-fancybox-group”或“rel”属性值的元素创建图库。

图片库
HTML
JavaScript

脚本使用匹配元素的`href`或`data-fancybox-href`属性来获取内容的位置，并计算出要显示的内容类型。你可以直接通过添加classname（fancybox.image，fancybox.iframe等）或`data-fancybox-type`属性来指定类型。使用`title`或`data-fancybox-title`属性来指定项目标题。

各种类型
HTML
JavaScript
Ajax
Iframe
一致
SWF
Youtube（iframe）
Google maps（iframe）
不存在的网址

或者，您可以将内容类型设置为选项: $(".open_ajax").fancybox({type: 'ajax'});.

注意，ajax请求遵循相同的源策略。如果fancyBox将无法获取内容类型，它将尝试基于'href'猜测，如果不成功，将静默退出（这与以前的版本不同，其中'ajax'被用作默认类型或错误消息显示）。

扩展功能

记住包括必要的文件！每个助手都位于单独的文件中。

按钮助手
HTML
JavaScript

缩略图帮助
HTML
JavaScript

媒体助手
HTML
JavaScript
Youtube
Vimeo
Metacafe
每日动作
Twitvid
Twitpic
Instagram
谷歌地图
搜索结果
直接链接
街景

License / Download

fancyBox许可使用Creative Commons Attribution-NonCommercial 3.0许可协议。
您可以随意使用fancyBox为您的个人或非营利网站项目。
您可以通过支付费用，获得作者对商业网站使用fancyBox的许可。

The latest source code is available on GitHub.

Download v2.1.5 View Licensing Options

文档

可用选项
API方法
回调
您可以将这些选项作为键/值对象传递给fancybox（）方法。也可以直接在fancyBox JS文件或者修改默认值$.fancybox.defaults

名称	描述说明
padding	内部的fancyBox里面的空间。可以设置为数组 - [上，右，下，左]。整数，数组; 默认值：15
margin	viewport和fancyBox之间的最小空间。可以设置为数组 - [上，右，下，左]。如果内容尺寸超过视口，则忽略右下边距整数，数组; 默认值：20
width	“iframe”和“swf”内容的默认宽度。也用于'inline'，'ajax'和'html'如果'autoSize'设置为'false'。可以是数字或“自动”。数字，字符串; 默认值：800
height	“iframe”和“swf”内容的默认高度。也用于'inline'，'ajax'和'html'如果'autoSize'设置为'false'。可以是数字或“自动” 数字，字符串; 默认值：600
minWidth	最小宽度fancyBox应该允许调整大小数; 默认值：100
minHeight	最小高度fancyBox应该允许调整大小数; 默认值：100
maxWidth	最大宽度fancyBox应该允许调整大小数; 默认值：9999
maxHeight	最大高度fancyBox应该允许调整大小数; 默认值：9999
autoSize	如果为true，则将autoHeight和autoWidth设置为true 布尔默认值：true
autoHeight	如果设置为true，则'inline'，'ajax'和'html'类型内容宽度是自动确定的。如果没有设置尺寸，这可能会产生意外的结果布尔默认值：false
autoWidth	如果设置为true，则'inline'，'ajax'和'html'类型内容高度是自动确定的。如果没有设置尺寸，这可能会产生意外的结果布尔默认值：false
autoResize	如果设置为true，内容将在窗口大小调整事件后调整大小布尔默认值：！isTouch
autoCenter	如果设置为true，内容将始终居中布尔默认值：！isTouch
fitToView	如果设置为true，则在打开之前调整fancyBox的大小以适合视口布尔默认值：true
aspectRatio	如果设置为true，则调整大小受原始宽高比的限制（图像始终保持比率;请参阅此示例 - 如果要更改其他媒体的比率）布尔默认值：false
topRatio	垂直居中的顶部空间比。如果设置为0.5，则垂直和底部的空间将相等。如果0 - fancyBox将在视口顶部数; 默认值：0.5
leftRatio	水平居中的左空间比率。如果设置为0.5，则左右空间将相等。如果0 - fancyBox将在视口左边数; 默认值：0.5
scrolling	设置溢出CSS属性以创建或隐藏滚动条。可以设置为'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，则启用循环导航。这意味着，如果在到达最后一个元素后单击“next”，将显示第一个元素（反之亦然）。布尔默认值：true
ajax	Options for ajax request Object; Default value: { dataType : 'html', headers : { 'X-fancyBox': true } }
iframe	Options for content type "iframe" Object; Default value: { scrolling : 'auto', preload : true }
swf	Options for content type "swf" Object; Default value: { wmode: 'transparent', allowfullscreen : 'true', allowscriptaccess : 'always' }
keys	Define keyboard keys for gallery navigation, closing and slideshow Object; Default value: { 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 play : [32], // space - start/stop slideshow toggle : [70] // letter "f" - toggle fullscreen }
direction	Default navigation direction (for navigation arrows, too) Object; Default value: { { next : 'left', prev : 'right' } }
scrollOutside	如果为true，脚本将尝试避免iframes和html内容的水平滚动布尔默认值：true
index	覆盖组开始索引整数; 默认值：0
type	覆盖内容的类型。支持的类型有'image'，'inline'，'ajax'，'iframe'，'swf'和'html' 串; 默认值：null
href	覆盖内容源链接串; 默认值：null
content	覆盖要显示的内容串; 默认值：null
title	覆盖标题内容，接受任何HTML 串; 默认值：null
tpl	Object containing various templates Object; Default value: { 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	完成转换所需的时间（以毫秒为单位，或“慢速”，“正常”，“快速”）整数; 默认值：250
openEasing / closeEasing / nextEasing / prevEasing	每种过渡类型的缓和方法。如果包含easing插件，你有很多选择串; 默认值：'swing'
openOpacity / closeOpacity	如果设置为true，透明度将更改为弹性转换布尔默认值：true
openMethod / closeMethod / nextMethod / prevMethod	从$ .fancybox.transitions（）方法处理转换（你可以添加自定义效果）串; 默认值：'zoomIn'/'zoomOut'/'changeIn'/'changeOut'
helpers	Object containing enabled helpers and options for each of them Object; Default value: { overlay : { closeClick : true, // if true, fancyBox will be closed when user clicks on the overlay speedOut : 200, // duration of fadeOut animation showEarly : true, // indicates if should be opened immediately or wait until the content is ready css : {}, // custom CSS properties locked : true // if true, the content will be locked into overlay }, title : { type : 'float' // 'float', 'inside', 'outside' or 'over' } }
live	如果设置为true，fancyBox使用“live”分配点击事件。设置为“false”，如果您需要仅应用于当前集合，例如，如果使用类似 - $("#page").children().filter('a').eq(0).fancybox(); Boolean; Default value: true
parent	容器的父元素。这对于顶层元素是“form”的ASP.NET非常有用 - $(".fancybox").fancybox({ parent: "form:first" // jQuery selector }); String; Default value: body

帮助

Helpers提供了一个简单的机制来扩展fancyBox的功能。有两个内置的助手 - “overlay”和“title”。您可以禁用它们，设置自定义选项或启用其他助手。例子：

//Disable title helper

$(".fancybox").fancybox({

    helpers:  {

        title:  null

    }

});

//Disable overlay helper

$(".fancybox").fancybox({

    helpers:  {

        overlay : null

    }

});

//更改标题位置; 在内容加载后显示叠加层

$(".fancybox").fancybox({

    helpers:  {

        title : {

            type : 'inside'

        },

        overlay : {

            showEarly : false

        }

    }

});

//Enable thumbnail helper and set custom options

$(".fancybox").fancybox({

    helpers:  {

        thumbs : {

            width: 50,

            height: 50

        }

    }

});

缩略图助手的选项

名称	说明
width	缩略图宽度
height	缩略图高度
source	获取缩略图图像的URL的功能。默认情况下，它使用anchor中的第一个图像或加载目标网址。 Examples: http://jsfiddle.net/PFVxK/, http://jsfiddle.net/2k8EP/
position	'top' or 'bottom'

按钮助手的选项

名称	描述
tpl	HTML 模板
position	'top' or 'bottom'

支持

帮帮我
常问问题
您可以使用StackOverflow网站提出问题，您最有可能得到快速回答许多Javascript专家花费在网站上的时间。确保在发布时添加标签“jquery”和“fancybox”。

如果您遇到问题并需要报告错误，请在GitHub问题上创建一个问题，我将进行调查。但不要忘记检查常见问题，先！