将博客园的照片添加放大功能

看到别人花里胡哨(这里是褒义,哈哈哈)的页面,很心动,然而不想花那个时间去美化,但是查资料看到一篇写的很漂亮的csdn博客时,图片的放大功能起了很关键的作用,有时候我们截图是全屏,但是在博客中插入后容易看不清,这个功能还是很实用的,所以还是想试试。

参考博客:https://www.cnblogs.com/yadongliang/p/10859206.html#_label2_0

先看看结果吧,这是随便截的图,试试能不能放大。

 好了,效果展示了,接下来看看怎么实现吧。

第一步:下载代码包

  链接:https://github.com/lokesh/lightbox2

  

第二步:上传代码和图片

  1. 打开.lightbox2-devlightbox2-devdistcsslightbox.css

  2. 搜索“background: url”,可以看到四个图片路径,一个后缀是.gif,另外三个是.png。博客园不支持png上传,所以将后缀是.png的都换成.ico。举例:../images/close.png --> ../images/close.ico。

  3. 进入.lightbox2-devlightbox2-devdistimages,将那三张png图片文件的后缀都改成ico

  4. 上传.lightbox2-devlightbox2-devdistimages下的4张图片文件到博客园

  5. 上传.lightbox2-devlightbox2-devdistcsslightbox.css和.lightbox2-devlightbox2-devdistjslightbox-plus-jquery.js文件到博客园

  6. 检查6个文件是否已经上传成功

  

第三步:编写页脚HTML代码

好了,现在可以测试一下上传的图片能否单击放大了。

原文地址:https://www.cnblogs.com/smart-zihan/p/12970905.html