实现图片灯箱功能 - 成就云开发者社区

写博客必不可少的一个功能就是图片灯箱功能，也就是点击放大查看。但是不同程序的博客所使用的插件也都不一样，我这里研究出一套可以满足绝大部分程序的灯箱插件。已经测试过hexo, hugo, typecho 均无问题。

引入文件

首先引入我们关键的两个文件分别是 zoom.css 和 zoom.js 。

代码语言：javascript

复制

<!-- head头部 -->
<link rel="stylesheet" href="https://cdn.imhan.cn/list/zoom.css">
<!-- body底部 -->

<!-- 如果已经有jq文件了，就不要引入jquery -->

<script src="https://cdn.imhan.cn/list/jquery3.6.0.js"></script>

<!--图片灯箱-->

<img src="" alt="" class="bigimg">

<div class="mask"></div>

<script src="https://cdn.imhan.cn/list/zoom.js"></script>

因为这个文件是放在我自己服务器上的，所以不敢保证以后还是这个路径，建议在浏览器打开，然后把里面的代码复制到本地使用。

调用js

然后我们需要给图片一个类名，以及一个父元素盒子，同样也可以使用 jq 来完成。

这里的 .post-content 正文的类名，如果你是别的类名，可以直接将 .post-content 替换掉。

代码语言：javascript

复制

$(function(){

$('.post-content img').addClass('smallimg')

$('.post-content img').wrap('<div class="imgbox"></div>')
})

接着我们需要对插件进行初始化，直接在刚才的代码下面写入。

代码语言：javascript

复制

$(function(){

$('.post-content img').addClass('smallimg')

$('.post-content img').wrap('<div class="imgbox"></div>')
    /*
smallimg   // 小图
bigimg  //点击放大的图片
mask   //黑色遮罩
*/
var obj = new zoom(&#39;mask&#39;, &#39;bigimg&#39;, &#39;smallimg&#39;);
obj.init();

})

回到页面上，点击正文的图片就可以成功放大了。

结束

随便放个图片试验一下吧！

之所以我限制了在正文中才可以放大，是因为网站其他地方也有图片，如果都可以点击放大，就很不合理。

如果在使用中有其他问题，欢迎留言。