JavaScript灯箱库，用于呈现各种类型的媒体。
响应式，触控式和可自定义。

下载

快速开始

                    
<!-- 1. Add latest jQuery and fancybox files -->

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>



<!-- 2. Create links -->

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>


<!-- 3. Have fun! -->

有关使用fancybox的指南，请访问我们的 学习部分。

特征

移动优化

在每台设备上都很棒。
滑动以导航，展开/捏合以在触摸设备上支持放大/缩小。

多个实例

可以打开模态，而另一个模态仍然可见。

快速简便的设置

只有两个文件。无需编写单行JavaScript即可实现。

自动内容识别

支持最受欢迎的网站，如YouTube，Vimeo和G​​oogle地图开箱即用。

GPU加速了

硬件加速动画以获得更好的性能。

响应

使用任何CSS单元设置HTML内容维度，浏览器将完成剩下的工作。
可以使用CSS轻松自定义SVG图标。

演示

图片

默认情况下，fancybox会在显示之前完全预加载图像。您可以选择立即显示图像。它将在接收数据时呈现并显示完整大小的图像。

Full list of options
Rocky mountain under blue and white sky
Photo by Guillaume Briard
Vaihingen an der Enz, Germany
Photo by Oliver Roos
Closeup photo of world globe
Photo by chuttersnap
Blessed are the curious, for they shall have adventures. 🚩
Photo by Andrew Neel
Man holding pair of ski poles in front of trees
Photo by Oziel Gómez
Aerial photo of person using paddleboard
Photo by Ishan @seefromthesky
Car on curve road surrounded by trees
Photo by Grant Porter

视频

只需提供网页网址，YouTube和Vimeo视频就可以与fancybox一起使用。集成的HTML5视频播放器将使用浏览器的原生视频功能播放MP4视频。

视频具有响应性，并始终适合窗口，同时保持正确的宽高比。

YouTube视频的默认设置

具有自定义宽高比（2/1）的Vimeo视频

直接链接到HTML5视频

自定义视频尺寸（自动计算宽高比）

在视频顶部显示关闭按钮; 自定义开始时间

隐藏的HTML5视频元素

各个

显示HTML元素，网页，视频，谷歌地图，并通过AJAX轻松加载内容。您可以在每个图库中混合图像，视频和任何HTML内容。

隐藏的HTML元素

打开演示

定制设计和开/关动画

打开演示

模态窗口

打开演示

根据内容自动调整iframe大小

打开演示

显示Google地图

打开演示

要有创意

fancybox的目标是帮助您脱颖而出，节省您的时间。借助一些CSS和JS，您可以轻松创建 出色的东西。不同的动画， UI，一切皆有可能！😉

以下是一小部分创意演示。

自定义布局

仅使用CSS更改视觉效果甚至布局。更改标题的位置并将其用于显示社交图标或广告。

打开演示

确认对话框

您可以使用fancybox为警报创建更现代的外观并确认对话框。

打开演示

快速的产品视图

完全改变模态窗口的外观。自定义布局，设计和虚线导航。

打开演示

变形模态叠加

结合使用jQuery，CSS过渡到模式窗口打开的方式。

打开演示

许可证

fancybox根据 GPLv3许可证授权所有开源应用程序。
所有商业应用程序（包括您计划销售的网站，主题和应用程序）都需要商业许可证。

单一
商业许可证

限于1个项目
社区支持
未来更新
29美元

立即购买

扩展
商业许可证

无限项目
1年保费支持
未来更新
119美元

立即购买

安全和安全的付款由FastSpring处理 。

有WordPress插件吗？

Not yet, but it is planned to be released this fall. It is going to be awesome.

我已经有了fancybox 2许可证。我需要升级吗？

No. All licenses purchased before February 24st 2017 have been automatically upgraded to their current equivalent and no action is required by the license holder.

单许可证和扩展许可证的主要区别是什么？

Single Commercial license allows you to use fancybox in one project (e.g, website, mobile app, etc). Cannot be used in salable software.

Extended Commercial license covers all projects made by you or one salable software (for example, one wordpress theme).

我可以在为多个客户销售的产品中使用fancybox（例如，在Themeforest上销售的主题中）吗？

By purchasing ONE "Extended Commercial license", you are allowed to include fancybox in ONE product (for example: premium theme, plugin or template) for sale. Customers and users of your product do not need to purchase their own license — as long as they are not developing their own commercial products with fancybox.

Warning You are not allowed to create a product directly competing with fancybox. For example, you are not allowed to create a premium plugin whose main purpose is to bring modal/lightbox functionality to website.

这是一次性付款吗？

All licenses are perpetual for the licensed version of the software: you can use them for as long as you like.