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

时间：2024-10-20 14:34:33

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

  1. Change overlay color and opacity
  2. 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
  3. Disable right click (add watermark)
  4. Remove white border around content
  5. Move navigation arrows outside -
    • For all items
    • Only for type "iframe"
  6. 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
  7. Fade content when changing gallery items
  8. Apply fancyBox on all images
  9. Start the gallery with only one preview picture:
    • Method one - Hide other images (multiple galleries)
    • Method two - Open fancyBox manually (multiple galleries)
  10. Launch fancyBox on page load:
    • Method one - Trigger one of the elements
    • Method two - Open fancyBox manually
  11. Reload page after closing
  12. Set parameters (like width and height) individually -
    • HTML5 data attributes
    • URL parameters
    • Metadata Plugin
    • Based on element ID
  13. Supersized effect
  14. Using YouTube API - go to the next video after the current one is finished playing
  15. Open PDF (inside iframe)
  16. Disable "locked" feature - the content is locked in the overlay by default
  17. Simple "dotted" navigation

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

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

实例

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

单个图像
HTML
JavaScript

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

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

图片库
HTML
JavaScript

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

  • 脚本使用匹配元素的`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

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

  • 缩略图帮助
    HTML
    JavaScript

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

  • 媒体助手
    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'

支持

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

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

相关文章