实现图片灯箱功能

子舒

发布于 2022-06-09 14:28:48

2.6K0

发布于 2022-06-09 14:28:48

文章被收录于专栏：子舒的个人博客

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

引入文件

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

<!-- 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 替换掉。

$(function(){
    $('.post-content img').addClass('smallimg')
      $('.post-content img').wrap('<div class="imgbox"></div>')

})

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

$(function(){
    $('.post-content img').addClass('smallimg')
        $('.post-content img').wrap('<div class="imgbox"></div>')

        /*
    smallimg   // 小图
    bigimg  //点击放大的图片
    mask   //黑色遮罩
    */
    var obj = new zoom('mask', 'bigimg', 'smallimg');
    obj.init();
})

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