?2016-2026 Matools All rights reserved,
粵ICP備17059708號
?序
?
?
?看看項目經理是如何實現(xiàn)的？
?插件選擇
試了幾個插件，感覺還是 lightbox 插件好用，鏈接：https://github.com/lokesh/lightbox2
<https://github.com/lokesh/lightbox2>，該插件具備如下幾個特點：
* 點擊圖片后根據(jù)圖片實際尺寸自動顯示
* 圖片有加載動畫特效，有前、后、關閉按鈕
想看詳細介紹，可以查看：https://www.lokeshdhakar.com/projects/lightbox2/
<https://www.lokeshdhakar.com/projects/lightbox2/>
?具體實現(xiàn)
通過上面的鏈接下載好后需要如下幾個文件：lightbox.css、lightbox-plus-jquery.js、close.png、loading.gif、next.png、prev.png，文件路徑如下：
?首先，我們需要把這些文件先上傳到博客園，如圖：
等等，好像發(fā)現(xiàn)了一個問題，博客園并不支持 png 格式的圖片，那怎么辦呢？可以找一個網站把 png 格式轉成其他格式，比如轉成 ico
格式，轉換網站有很多，比如：https://www.easyicon.net/covert/
<https://www.easyicon.net/covert/>?。
圖片格式轉好了后，我們先把 close.ico、loading.gif、next.ico、prev.ico、lightbox-plus-jquery.js
文件上傳到博客園，如圖：
然后再修改?lightbox.css 中 close.ico、loading.gif、next.ico、prev.ico
的鏈接地址，鏈接地址我們可以通過點擊上傳后的具體文件查看，比如：修改 close.ico 文件鏈接地址如圖所示：
?鏈接地址都修改完了后，我們再把修改后的?lightbox.css 上傳到博客園，就完成了所需文件的上傳。
接下來我們在 “頁腳Html代碼” 這個位置添加如下代碼，就完成了修改，記得把文件地址替換成自己的。
<!-- lightbox的樣式 --> <link href="
https://blog-static.cnblogs.com/files/huangxy/lightbox.css" rel="stylesheet">
<!-- lightbox.js核心代碼 --> <script src="
https://blog-static.cnblogs.com/files/huangxy/lightbox-plus-jquery.js"
></script> <script type='text/javascript'>$('#cnblogs_post_body img'
).wrap(function(){return "<a href='"+$(this).attr("src")+"'
data-lightbox='example-set'></a>"});</script> <script type='text/javascript'>$("
.code_img_closed").unwrap();</script> <script type='text/javascript'>$("
.code_img_opened").unwrap();</script>?
還沒實現(xiàn)的，趕快來試一下吧！
熱門工具 換一換