實現效果

• 圖片點選後根據實際尺寸自動顯示
• 圖片載入與關閉淡入淡出 (可以點選本文章圖片檢視效果)
• 詳戳：https://www.lokeshdhakar.com/projects/lightbox2/

詳細操作步驟

1.下載程式碼包，解壓縮（https://www.lokeshdhakar.com/projects/lightbox2/）

2.開啟C:\Users\sl\Desktop\lightbox2-2.11.3\examples\index.html檢視程式碼

可以看到它除引用css和js檔案外，還把img標籤包裹在a標籤當中，並給a標籤添加了屬性：

data-lightbox="
 
example-set"

屬性值可以任意，其差別在https://www.lokeshdhakar.com/projects/lightbox2/中說的很詳細。

3.更改引用圖片名稱，並上傳至部落格園（4張圖片）

將這四張圖片重新命名並通過後臺上傳到部落格園檔案，因為png字尾檔案不支援上傳，我這裡將png字尾的圖片改為了ico字尾

4.修改css檔案中相應圖片的路徑，並上傳至部落格園（1個檔案）

修改lightbox.css檔案中的“background: url”，和剛上傳的四張圖片路徑一一對應，儲存lightbox.css並上傳。（這兩個檔案內容是一樣的，min是壓縮版本）

注意：一定要把路徑放對！

5.上傳lightbox-plus-jquery.js（1個檔案）

將C:\Users\sl\Desktop\lightbox2-2.11.3\dist\js\lightbox-plus-jquery.js檔案上傳至部落格園。

至此，共上傳了6份檔案，js、css與4張圖片。

6.引用上傳的css和js檔案

在“頁尾html程式碼”一欄引入剛上傳的css和js檔案，除此之外還要給img標籤外包裹一層a標籤，並新增data-lightbox='example-set'屬性（需要移除程式碼摺疊按鈕的父元素 --同第二步）：

(複製下面程式碼就可以，部落格園需申請js許可權)

<!-- lightbox的樣式 -->
<link href="
 
https://blog-static.cnblogs.com/files/mbitions/lightbox.css" rel="stylesheet">

<!-- lightbox.js核心程式碼 -->
<script src="https://blog-static.cnblogs.com/files/mbitions/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>

最後：點選檢視效果圖

歐耶~~收工啦！！