用 zoom.js 给博客园中博文的图片添加单击时弹出放大效果

1.选择zoom.js

写博客时常常要插入图片。有些图片尺寸太大，这致使图片最终的视觉呈现总会略小。为了保留大图片的原有信息量，须要用 js 来添加图片的放大支持。

为求方便快捷，我使用了 zoom.js 插件来实现博客图片的放大支持。zoom.js 是一款视觉连续的图像放大 jQuery 插件。选择它的理由在于：

1. 效果简洁美观
2. 插件体积仅8kb
3. 体验友好，放大后单击任意地方或滚动鼠标滚轮或按ESC键都可退出放大状态

 

2.演示地址

https://fat.github.io/zoom.js/

 

3.使用方法

在 html 中引入 css 和 js 文件：

<!-- zoom.js 的样式 -->
<link rel="stylesheet" type="text/css" href="./css/zoom.css">
<!-- jQuery 的 cdn -->
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap 的 transition.js cdn（过渡动画插件）-->
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
<!-- zoom.js 核心代码 -->
<script src="./js/zoom.js"></script>

而后给要放大的图片标签添加 data-action="zoom" 属性：

<img src="./image/demo.jpg" data-action="zoom">

OK，就这样。

 

4.zoom.js与博客园模板的样式冲突

博客园我的后台里申请到JS权限后，添加一句JS便可实现图片弹出：

<script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>

 

可是可能会出现与某些原有样式的冲突：

单击图片放大时，zoom.js 会给图片外包裹一个 <div> 标签做为全景遮罩，同时图片放大居中。可是博客园模板的 #topics 元素（博文的容器元素）设置了溢出隐藏，会致使放大图片的部分没法呈现出来。因此要重写 #topics 的相应样式：

#topics{ overflow: visible; }

　　

这样图片放大就能彻底显示了。但 #postDesc 元素的内容（就是“posted @ 2017-08-26 17:57 xxxx 阅读(xxxx) 评论(xxxx) 编辑 收藏”这一行）又从 #topics 里面掉出来了。因此再加一句 css：

#postDesc{ float: none; }　

这样就行了。具体效果根据本身的模板微调就行。

 

5.总结

zoom.js 的放大效果显然比较简单，相对适合博文图片。至于更加复杂的图片处理，就要考虑别的插件 or 本身写了。

 

参考连接：http://www.shejidaren.com/zoom-js.html

zoom.js GitHub：https://github.com/fat/zoom.js