新内容

版本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

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

图片库
HTML
JavaScript

或者，您可以将内容类型设置为选项: $(".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

{
	dataType : 'html',
	headers  : { 'X-fancyBox': true }
}

{
	scrolling : 'auto',
	preload   : true
}

{
	wmode: 'transparent',
	allowfullscreen   : 'true',
	allowscriptaccess : 'always'
}

{
	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
}

{
	{
		next : 'left',
		prev : 'right'
	}
}

{
	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 >
	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>'
}

{
	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'
	}
}

$("#page").children().filter('a').eq(0).fancybox();

$(".fancybox").fancybox({
    parent: "form:first" // jQuery selector
});

帮助

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

缩略图助手的选项

按钮助手的选项

支持

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

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