博客园使用 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文件路径：

?

1 2 3 4 5 6 7 8

<!-- 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博客园官方已实现图片放大功能