實現效果
- 圖片點擊后根據實際尺寸自動顯示
- 圖片加載與關閉淡入淡出 (可以點擊本文章圖片查看效果)
- 詳戳：https://www.lokeshdhakar.com/projects/lightbox2/
參考：https://www.cnblogs.com/mbitions/p/13783934.html
詳細操作步驟
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>
最后：點擊查看效果圖
歐耶~~收工啦！！
作者：微微一笑絕絕子
出處：https://www.cnblogs.com/wwyxjjz/p/15152612.html
本博客文章均為作者原創，轉載請注明作者和原文鏈接。