lightbox2实现页面图片点击放大

lightbox2实现页面图片点击放大

Scroll Down

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

下载.jpg

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

1、下载代码文件

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

下载好以后,就获取到

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

image.png

2、上传文件到服务器

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

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

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

image.png

3、修改lightbox.css

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

image.png

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

4、添加代码

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

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

<!-- lightbox.js核心代码 -->
<script src="http://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> 

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

image.png

这样就完成了!

最后,伸手党福利!

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

不过还是建议自己动手!