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="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="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>
<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a>
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="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选项 |
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 |
$.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.
文档
可用选项
API方法
回调
您可以将这些选项作为键/值对象传递给fancybox()方法。 也可以直接在fancyBox JS文件或者修改默认值$.fancybox.defaults
名称 | 描述说明 |
---|---|
padding | 内部的fancyBox里面的空间。 可以设置为数组 - [上,右,下,左]。 |
margin | viewport和fancyBox之间的最小空间。 可以设置为数组 - [上,右,下,左]。 如果内容尺寸超过视口,则忽略右下边距 |
width | “iframe”和“swf”内容的默认宽度。 也用于'inline','ajax'和'html'如果'autoSize'设置为'false'。 可以是数字或“自动”。 |
height | “iframe”和“swf”内容的默认高度。 也用于'inline','ajax'和'html'如果'autoSize'设置为'false'。 可以是数字或“自动” |
minWidth | 最小宽度fancyBox应该允许调整大小 |
minHeight | 最小高度fancyBox应该允许调整大小 |
maxWidth | 最大宽度fancyBox应该允许调整大小 |
maxHeight | 最大高度fancyBox应该允许调整大小 |
autoSize | 如果为true,则将autoHeight和autoWidth设置为true |
autoHeight | 如果设置为true,则'inline','ajax'和'html'类型内容宽度是自动确定的。 如果没有设置尺寸,这可能会产生意外的结果 |
autoWidth | 如果设置为true,则'inline','ajax'和'html'类型内容高度是自动确定的。 如果没有设置尺寸,这可能会产生意外的结果 |
autoResize | 如果设置为true,内容将在窗口大小调整事件后调整大小 |
autoCenter | 如果设置为true,内容将始终居中 |
fitToView | 如果设置为true,则在打开之前调整fancyBox的大小以适合视口 |
aspectRatio | 如果设置为true,则调整大小受原始宽高比的限制(图像始终保持比率;请参阅此示例 - 如果要更改其他媒体的比率) |
topRatio | 垂直居中的顶部空间比。 如果设置为0.5,则垂直和底部的空间将相等。 如果0 - fancyBox将在视口顶部 |
leftRatio | 水平居中的左空间比率。 如果设置为0.5,则左右空间将相等。 如果0 - fancyBox将在视口左边 |
scrolling | 设置溢出CSS属性以创建或隐藏滚动条。 可以设置为'auto','yes','no'或'visible' |
wrapCSS | 可定制的CSS类包装元素(对自定义样式有用) |
arrows | 如果设置为true,将显示导航箭头 |
closeBtn | 如果设置为true,将显示关闭按钮 |
closeClick | 如果设置为true,fancyBox将在用户单击内容时关闭 |
nextClick | 如果设置为true,将在用户单击内容时导航到下一个图库项目 |
mouseWheel | 如果设置为true,您将能够使用鼠标滚轮浏览图库 |
autoPlay | 如果设置为true,幻灯片将在打开第一个图库项目后开始 |
playSpeed | 幻灯片速度(毫秒) |
preload | 要预加载的图库图像数 |
modal | 如果设置为true,将禁用导航和关闭 |
loop | 如果设置为true,则启用循环导航。 这意味着,如果在到达最后一个元素后单击“next”,将显示第一个元素(反之亦然)。 |
ajax | Options for ajax request Object; Default value:
|
iframe | Options for content type "iframe" Object; Default value:
|
swf | Options for content type "swf" Object; Default value:
|
keys | Define keyboard keys for gallery navigation, closing and slideshow Object; Default value:
|
direction | Default navigation direction (for navigation arrows, too) Object; Default value:
|
scrollOutside | 如果为true,脚本将尝试避免iframes和html内容的水平滚动 |
index | 覆盖组开始索引 |
type | 覆盖内容的类型。 支持的类型有'image','inline','ajax','iframe','swf'和'html' |
href | 覆盖内容源链接 |
content | 覆盖要显示的内容 |
title | 覆盖标题内容,接受任何HTML |
tpl | Object containing various templates Object; Default value:
|
openEffect / closeEffect / nextEffect / prevEffect | 每个转换类型的动画效果('elastic','fade'或'none') |
openSpeed / closeSpeed / nextSpeed / prevSpeed | 完成转换所需的时间(以毫秒为单位,或“慢速”,“正常”,“快速”) |
openEasing / closeEasing / nextEasing / prevEasing | 每种过渡类型的缓和方法。 如果包含easing插件,你有很多选择 |
openOpacity / closeOpacity | 如果设置为true,透明度将更改为弹性转换 |
openMethod / closeMethod / nextMethod / prevMethod | 从$ .fancybox.transitions()方法处理转换(你可以添加自定义效果) |
helpers | Object containing enabled helpers and options for each of them Object; Default value:
|
live | 如果设置为true,fancyBox使用“live”分配点击事件。 设置为“false”,如果您需要仅应用于当前集合,例如,如果使用类似 -
Boolean; Default value: true |
parent | 容器的父元素。 这对于顶层元素是“form”的ASP.NET非常有用 -
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问题上创建一个问题,我将进行调查。 但不要忘记检查常见问题,先!