让博客中的图片支持 fancybox 浏览

第1步，添加 jQuery 和 fancybox 文件

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.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步，集成 fancybox, 为所有 img 元素添加父元素

$("img").not('#blogTitle img').not('#blog_nav_rss_image img').not('#green_channel_weibo img').not('#green_channel_wechat img').not('.author_profile_info img').each(function () {
    var element = document.createElement("a");
    $(element).attr("data-fancybox", "gallery");
    $(element).attr("href", $(this).attr("src"));
    $(this).wrap(element);
});

该代码用于向 <img> 标签外嵌套 FancyBox 所要求的 <a> 标签。但由于该代码将 fancybox 应用于所有图片文件，包括图标、按钮等不希望应用的图片素材，因此需要修改 .not() 排除部分对象。

参考链接

http://fancyapps.com/fancybox/3/

https://www.jianshu.com/p/6f0ba000f952

https://blog.ojhdt.com/20190622/fancybox/