介绍：用于呈现各种类型媒体的javascript lightbox库。响应灵敏，触控灵活，可定制。

3.0主要就是功能多且美观

官方给出的最快使用方法

<!-- 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.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/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! -->

但是美中不足，我们希望内容文章图片直接增加属性还需要写一句代码

<script>
$('.message img').parent('a').attr('data-fancybox','gallery');
</script>
这里的.message 是文章的class类 也可以是id根据网页自己修改

程序源码下载：https://codeload.github.com/fancyapps/fancybox/zip/master

官方地址：https://fancyapps.com/fancybox/3

过于简单，就不写什么插件了。

貌似忘记加预览效果了

此代码于本文无关

$("a[href$=jpg],a[href$=jpeg],a[href$=gif],a[href$=png]").addClass("swipebox").attr('rel','');