用 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