用 zoom.js 給博客園中博文的圖片添加單擊時彈出放大效果

 一. 寫在前面

以下內容為zoom.js的實現方式，本博的圖片放大功能已經升級，詳細可參考博文：

博客園文章圖片點擊放大功能升級，有問題歡迎留言討論。

 

 

1.下載js和css文件后上傳到cnblogs(下載地址);

 

2.按照文中所述將代碼放到相應位置(也就是頁面定制CSS代碼和頁腳HTML代碼兩處) 並修改引用的zoom.js和zoom.css文件路徑;

3.完成以上2步即可實現點擊放大縮小的效果, 但是有個問題(也可能是我模版問題), 點擊圖片后不能完全顯示, 右側一部分被遮蓋了, F12調試發現#topics外面還包着兩層div, 正文最外層是#mainContent , 所以把這層的overflow屬性值也設置成visible, 這樣就好了.(美中不足是放大后的圖片會變模糊 囧 =_=||....)

/*溢出隱藏設置*/
#topics, #mainContent {
    overflow: visible;
}

4.評論區有一兄dei提出了個問題, 就是代碼+-號會出現問題, 問題及解決方案如下圖.

代碼:

<script type='text/javascript'>$(".code_img_closed").removeAttr("data-action");</script>
<script type='text/javascript'>$(".code_img_opened").removeAttr("data-action");</script>

 5.cnblgs自定義樣式小結:自定義cnblogs樣式小結

二. 以下是我的代碼/文件及存放位置

詳細設置代碼:(博客主頁>設置>)

css:(頁面定制CSS代碼)

/*溢出隱藏設置*/
#topics, #mainContent {
    overflow: visible;
}
#postDesc {
    float: none;
}

 頁腳html:(頁腳Html代碼)

<!-- zoom.js 的樣式 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/yadongliang/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="https://blog-static.cnblogs.com/files/yadongliang/zoom.js"></script>
<script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>

  以下是截圖

 

 

點擊圖片驗證:

 

三. 以下為轉載正文.(非常詳細了.)

轉自:https://www.cnblogs.com/mingc/p/7446492.html

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 文件：

1 2 3 4 5 6 7 8

<!-- 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" 屬性：

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

OK，就這樣。

 

4.zoom.js與博客園模板的樣式沖突

博客園個人后台里申請到JS權限后，添加一句JS即可實現圖片彈出：

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

 

但是可能會出現與某些原有樣式的沖突：

單擊圖片放大時，zoom.js 會給圖片外包裹一個 <div> 標簽作為全景遮罩，同時圖片放大居中。但是博客園模板的 #topics 元素（博文的容器元素）設置了溢出隱藏，會導致放大圖片的部分無法呈現出來。所以要重寫 #topics 的相應樣式：

1	#topics{  overflow :  visible ; }

　　

這樣圖片放大就能完全顯示了。但 #postDesc 元素的內容（就是“posted @ 2017-08-26 17:57 xxxx 閱讀(xxxx) 評論(xxxx) 編輯 收藏”這一行）又從 #topics 里面掉出來了。所以再加一句 css：

1	#postDesc{  float :  none ; }

這樣就好了。具體效果根據自己的模板微調就行。

 

5.總結

zoom.js 的放大效果顯然比較簡單，相對適合博文圖片。至於更加復雜的圖片處理，就要考慮別的插件 or 自己寫了。

 

參考鏈接：http://www.shejidaren.com/zoom-js.html

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

 

 補充:可以采用lightbox 效果更好! https://lokeshdhakar.com/projects/lightbox2/

　　  demo:http://code.ciaoca.com/jquery/lightbox/

 

四.圖片點擊功能升級：https://www.cnblogs.com/yadongliang/p/10859206.html

 

五. 最后回顧一下css的overflow屬性.

瀏覽器支持

所有主流瀏覽器都支持 overflow 屬性。

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

定義和用法

overflow 屬性規定當內容溢出元素框時發生的事情。

說明

這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。

默認值：	visible
繼承性：	no
版本：	CSS2
JavaScript 語法：	object.style.overflow="scroll"

可能的值

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

TIY 實例

如何使用滾動條來顯示元素內溢出的內容

本例演示當元素內容太大而超出規定區域時，如何設置溢出屬性來規定相應的動作。

如何隱藏溢出元素中溢出的內容

本例演示在元素中的內容太大以至於無法適應指定的區域時，如何設置 overflow 屬性來隱藏其內容。

如何設置瀏覽器來自動地處理溢出

本例演示如何設置瀏覽器來自動地處理溢出。