博客园使用 lightBox 使图片放大

下载源码

链接

更改引用图片名称，并上传至博客园

文件夹：lightbox2-dev\lightbox2-dev\dist\images

因为png后缀文件不支持上传，我这里将png后缀的图片改为了ico后缀，且上传到博客的文件中：

修改css文件中相应图片的路径，并上传至博客园

修改lightbox.css文件中的“background: url”，和刚上传的四张图片路径一一对应，保存lightbox.css并上传：

上传lightbox-plus-jquery.js

引用上传的css和js文件

 在“页脚html代码”一栏写入，记得修改css和js文件路径：

<!-- lightbox的样式 -->
<link href="https://blog-static.cnblogs.com/files/pam-sh/lightbox.css" rel="stylesheet">

<!-- lightbox.js核心代码 -->
<script src="https://blog-static.cnblogs.com/files/pam-sh/lightbox-plus-jquery.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script>
<script type='text/javascript'>$(".code_img_closed").unwrap();</script>
<script type='text/javascript'>$(".code_img_opened").unwrap();</script>

 

保存

刷新

PS

2021.2.25博客园官方已实现图片放大功能