fancybox是一个开源（GPLv3协议）、响应式的灯箱显示图像、视频等信息的插件，支持触摸操作、可完全定制，支持最常见的触控（双击、双指缩小、放大等）。移动设备优先，每个设备上都能有看起来不错的效果，可以创建多个实例，简单易用，使用硬件加速动画性能更好，所有的图形，包括加载图标，只使用CSS创建。

1、下载及初始化

下载完成后解压，把dist中的所有文件放到项目任意位置，在页面中引入最新版的jQuery和fancybox的js、css文件。

在body中创建a元素，设置href属性（灯箱中大图地址），添加自定义属性data-fancybox或者data-fancybox="gallery"（需要多个实例需要设置值，自定义一组设置为同一个值），在a元素中引入img（缩略图）。

无需编写一行JavaScript，刷新页面效果就出来了。

npm安装命令：npm install @fancyapps/fancybox --save

bower安装命令：bower install fancybox --save

2、功能展示

⑴国际化语言

内置两种语言，英语（en）和德语（de），可自定义语言。

⑵图片说明

在a标签中设置data-caption属性。

⑶基于不同分辨率显示不同图像

设置data-scrset属性即可，设置方法如下所示。

⑷内联HTML

⑸ajax加载内容、过滤

你需要添加一个data-type="ajax"属性，过滤可以通过data-filter属性或者data-src来完成。

ajax加载内容

⑹自定义布局

⑺警告对话框

⑻更改打开方式

⑼灯箱缩略图

⑽手势操作

API文档：

fancybox内置属性还有很多，如宽高、幻灯片设置、键盘操作、环形显示等，内置回调函数（包含初始化、加载前后、显示前后、关闭前后等），点击事件如点击内容、点击幻灯片、点击背景灯，同时支持为移动端特别定制，实现更好的展示效果，使用简单，API文档丰富能够满足你对灯箱效果的大部分需求。

有哪里写得不好的地方请大家提出来，请轻喷，谢谢。 同时有什么与编程相关的好东西可以推举给我，再次感谢！