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

V2AS问路

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

阅读原文时间：2020年10月08日阅读：1

2016年11月17日11:57:14

基础使用

http://fancybox.net/howto

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

包含必要的JS文件

建议从CDN加载jQuery

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

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

3. 添加FancyBox CSS文件

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

创建链接元素（）

Images 图片

内联内容
This shows content of element who has id="data"

Iframe
This goes to iframe

This goes to iframe
Ajax
This takes content using ajax

可选 - 如果要显示标题，请使用锚点的标题属性
注意 - 如果显示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.grouped_elements").fancybox();

api参数文档

http://fancybox.net/api

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

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

键名

默认值

描述

padding

FancyBox包装器和内容之间的空间

margin

视口和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库。例：

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

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

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
谷歌地图
搜索结果
直接链接
街景

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 : '

',
image : '

',
iframe : '',
error : '

The requested content cannot be loaded.
Please try again later.

',
closeBtn : '',
next : '',
prev : ''
}

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问题上创建一个问题，我将进行调查。但不要忘记检查常见问题，先！

手机扫一扫

移动阅读更方便

你可能感兴趣的文章