fancybox.js
JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.
图片预览插件
图片预览的话有很多插件，不过 fancybox 我认为是比较公然好评的一款，之所以使用它也是因为之前把图片预览关掉了（像图片比较多的页面还是比较不方便），优缺点以及在 weblog 里讲了，这里简单记下使用的步骤
简单安装
fancybox.js 依赖于 jQuery，这一点也是比较片面的，毕竟要使用 jq 才行（有一款纯js的，不过安装比较麻烦），那么首先引入 jq
代码语言：javascript复制<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>然后是 fancybox.js 核心文件
代码语言：javascript复制<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>使用说明
很简单，在需要加入 fancybox 的图片外包裹一个特定的 a 标签就ok
href 填写图片路径即可
代码语言：javascript复制<a data-fancybox="gallery" href="1.jpg">
<img src="1.jpg" />
</a>其他
因为我图片启用了 lazyload ，所以直接获取 img.lazy 的 data-original 属性的值填充到 a 标签的 href 内即可。
全局启用后有的不需要 fancybox 效果的页面图片也被应用了 fancybox 效果，所以加了个父元素是否为 a 标签的判断。
目前只想在 news 和 notes 两个页面应用该效果，通过 box 的 class 来判断容器（需要同时判断 iboxes 因为 container 内包含了 ibox，会导致的问题是有 ibox 页面 img 都会被包裹）
以上判断均有 bug
尝试了几种方案，其中最合适的还是 直接遍历 img 所有父元素，判断是否能匹配指定类名，是则文章页面（指定类名仅 news 和 notes 页面）
代码语言：javascript复制$('img.lazy').each(function(){
let img=$(this),
src=img.attr('data-original'),
box=img.parents(); //box=img.parents('news-article-container')
//box ? img.wrap('<a data-fancybox="gallery" href="' src '"></a>') : false;
box.hasClass('news-article-container') ? img.wrap('<a data-fancybox="gallery" href="' src '"></a>') : false;
});以上，有问题评论区反馈。
