序

 看看專案經理是如何實現的？

 外掛選擇

試了幾個外掛，感覺還是 lightbox 外掛好用，連結：https://github.com/lokesh/lightbox2，該外掛具備如下幾個特點：

• 點選圖片後根據圖片實際尺寸自動顯示
• 圖片有載入動畫特效，有前、後、關閉按鈕

想看詳細介紹，可以檢視：https://www.lokeshdhakar.com/projects/lightbox2/

 具體實現

通過上面的連結下載好後需要如下幾個檔案：lightbox.css、lightbox-plus-jquery.js、close.png、loading.gif、next.png、prev.png，檔案路徑如下：

 首先，我們需要把這些檔案先上傳到部落格園，如圖：

等等，好像發現了一個問題，部落格園並不支援 png 格式的圖片，那怎麼辦呢？可以找一個網站把 png 格式轉成其他格式，比如轉成 ico 格式，轉換網站有很多，比如：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> 

還沒實現的，趕快來試一下