使用lightbox2点击图片放大，这个操作起来，原来没搞懂，懂了以后发现真简单！操作很方便。
具体效果：

我使用的是halo博客系统，因此就用halo的siren主题作为教程。

1、下载代码文件

下载地址如下：
插件地址：https://github.com/lokesh/lightbox2
插件官网：https://www.lokeshdhakar.com/projects/lightbox2/

下载好以后，就获取到

我们取出里面的dict文件夹。

2、上传文件到服务器

文件上传到方法就不说了，实际上传只需要部分文件

• css文件夹的lightbox.css
• images文件夹的四个图片close.png、loading.png、next.png 和 prev.png
• js文件夹的lightbox-plus-jquery.js

我将dist文件加上传到siren主题的文件夹根目录，但是images四个图片放在了主题的images文件里面。

3、修改lightbox.css

这里需要修改lightbox.css文件里面的images图片的位置。这个位置信息需要根据你自己的位置去寻找。

四个图片都需要手动修改位置。

4、添加代码

这里需要将下面的代码，添加到footer.ftl里面，header.ftl也是可以的！

<!-- lightbox的样式 -->
<link href="http://www.zabbx.cn/louie_senpai_siren/dist/css/lightbox.css" rel="stylesheet">

<!-- lightbox.js核心代码 -->
<script src="http://www.zabbx.cn/louie_senpai_siren/dist/js/lightbox-plus-jquery.js"></script>
<script type='text/javascript'>$('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> 

上面代码要注意，如果要在其他地方使用，一定要确定图片的获取标签。

这样就完成了！

最后，伸手党福利！

上面代码使用了halo博客的siren主题的，只要我的服务器不倒，直接复制代码就可以使用，也不用上传文件了！

不过还是建议自己动手！