为你的网站引入Fancybox

效果

官网下载

https://fancyapps.com/fancybox

大概就是这么一个效果。

使用

下载好 fancybox.umd.js和fancybox.css

使用以下js代码：

$("img").each(function () {
    var element = document.createElement("a");
    $(element).attr("data-fancybox", "gallery");
    $(element).attr("href", $(this).attr("src"));
    $(this).wrap(element); //给当前标签外面套一层a标签
});

就是给 img标签 加一层 a标签

类似效果如下：

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