为你的网站引入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>