用 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