博客园图片点击放大功能
功能效果
- 图片点击后根据实际尺寸自动显示
- 图片加载与关闭淡入淡出 (可以点击本文章图片查看效果)
- 详戳：https://www.lokeshdhakar.com/projects/lightbox2/
操作步骤：
1. 下载压缩包，并解压：
2.更改引用图片名称，并上传至博客园（4张图片）
将这四张图片重命名并通过后台上传到博客园文件，因为png后缀文件不支持上传，我这里将png后缀的图片改为了ico后缀
3.修改css文件中相应图片的路径，并上传至博客园（1个文件）
修改lightbox.css文件中的“background: url”，和刚上传的四张图片路径一一对应，保存lightbox.css并上传。
（这两个文件内容完全一样，mini只是压缩版本）
注意：一定要把路径放对
4.上传lightbox-plus-jquery.js（1个文件）
共上传了6份文件，js、css与4张图片。
5.引用上传的css和js文件
在“页脚html代码”一栏引入刚上传的css和js文件
(复制下面代码就可以，博客园需申请js权限)
<!-- lightbox的样式 -->
<link href="https://blog-static.cnblogs.com/files/mbitions/lightbox.css" rel="stylesheet">
<!-- lightbox.js核心代码 -->
<script src="https://blog-static.cnblogs.com/files/mbitions/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>
6.保存，查看效果，大功告成！！！
