失眠网 > ujquery.fancybox api开发文档中文翻译版

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

时间：2024-04-17 05:35:35

11月17日11:57:14

基础使用

/howto

1. 首先，请确保您使用的是有效的DOCTYPE这是FancyBox看起来和功能正确需要。2. 包含必要的JS文件建议从CDN加载jQuery<script type="text/javascript" src="/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参数文档

/api

此文档是给1.3+版本使用的, for versions 1.2+/api/126(此版本不翻译)

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

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

fancyBox2 文档在这个/fancybox/#docs

新内容

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

值得注意的变化

可扩展使用助手

响应(尝试调整窗口大小，而fancyBox是打开)

集成幻灯片

新的图库过渡

使用CSS3(阴影，圆角)

更新了插件选项(与以前的版本不兼容)

现已授权Creative Commons Attribution-NonCommercial 3.0

说明

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

<script type="text/javascript" src="/jquery-latest.min.js"></script>  <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>  <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>  <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 opacityTitle - Use different attribute as valueGet thumbnail "alt" attribute and use itUse element instead of attributeChange title typeDisable titleSet title at the topAdd something to the title (add download link)Stretch and show/hide on mouse hover Disable right click(add watermark)Remove white border around contentMove navigation arrows outside - For all itemsOnly for type "iframe" Customize/change the content - Social buttons (twitter and fb)Add custom icon (full-screen)Append custom contentUse 3rd party script (query-Oembed-All) to embed content from other website Fade content when changing gallery itemsApply fancyBox on all imagesStart 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 elementsMethod two - Open fancyBox manually Reload page after closingSet parameters (like width and height) individually - HTML5 data attributesURL parametersMetadata PluginBased on element ID Supersized effectUsing YouTube API - go to the next video after the current one is finished playingOpen PDF (inside iframe)Disable "locked" feature- the content is locked in the overlay by defaultSimple "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 onGitHub.

Download v2.1.5View Licensing Options

文档

可用选项

API方法

回调

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

帮助

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 } } });