寫在前面
在此之前本博的圖片放大功能是采用的zoom.js，查看效果並不友好，圖片放大后模糊不清。具體操作步驟不再贅述，詳細移步：https://www.cnblogs.com/yadongliang/p/9327659.html
功能升級
本次進行功能升級，采用lightbox。
特色
- 圖片點擊后根據實際尺寸自動顯示
- 圖片加載與關閉淡入淡出
- 通篇文章圖片放入集合中，可以按次序瀏覽
- balabala。。詳戳：https://www.lokeshdhakar.com/projects/lightbox2/
點擊查看效果圖
詳細操作步驟
1.下載代碼包，解壓縮（https://www.lokeshdhakar.com/projects/lightbox2/）
2.打開C:\Users\Administrator\Downloads\lightbox2-master\examples\index.html查看代碼
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Lightbox Example</title> <link rel="stylesheet" href="../dist/css/lightbox.min.css"> </head> <body> <section> <h3>Two Individual Images</h3> <div> <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"> <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /> </a> <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."> <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1"/> </a> </div> <hr /> <h3>A Four Image Set</h3> <div> <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."> <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/> </a> <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."> <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /> </a> <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."> <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /> </a> <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."> <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /> </a> </div> </section> <section> <p> For more information, visit <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a> </p> </section> <script src="../dist/js/lightbox-plus-jquery.min.js"></script> </body> </html>
可以看到它除引用css和js文件外，還把img標簽包裹在a標簽當中，並給a標簽添加了屬性：
data-lightbox="example-set"
屬性值可以任意，其差別在https://www.lokeshdhakar.com/projects/lightbox2/中說的很詳細。
3.更改引用圖片名稱，並上傳至博客園（4張圖片）
為了便於查看修改，並不打算用壓縮后的mini文件，而是打開C:\Users\Administrator\Downloads\lightbox2-master\dist\css\lightbox.css（因為這兩個文件內容完全一樣，mini只是壓縮版本）
搜索“..”或者搜索“background: url”，共四處引用了圖片，也就是C:\Users\Administrator\Downloads\lightbox2-master\dist\images路徑下的四張圖片（關閉，上一張，下一張，加載），將這四張圖片重命名並通過后台上傳到博客園文件，因為png后綴文件不支持上傳，我這里將png后綴的圖片改為了ico后綴，熟悉ps的都知道這兩種后綴都是透明背景（假裝很懂）。
4.修改css文件中相應圖片的路徑，並上傳至博客園（1個文件）
修改lightbox.css文件中的“background: url”，和剛上傳的四張圖片路徑一一對應，保存lightbox.css並上傳。
5.上傳lightbox-plus-jquery.js（1個文件）
將C:\Users\Administrator\Downloads\lightbox2-master\dist\js\lightbox-plus-jquery.js文件上傳至博客園。
至此，共上傳了6份文件，js、css與4張圖片。
6.引用上傳的css和js文件
在“頁腳html代碼”一欄引入剛上傳的css和js文件，除此之外還要給img標簽外包裹一層a標簽，並添加data-lightbox='example-set'屬性（需要移除代碼折疊按鈕的父元素）：
<!-- lightbox的樣式 -->
<link href="https://blog-static.cnblogs.com/files/yadongliang/lightbox.css" rel="stylesheet">
<!-- lightbox.js核心代碼 -->
<script src="https://blog-static.cnblogs.com/files/yadongliang/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>
7.保存並查看效果
伸手黨福利
啰嗦了這么多，假如你想偷懶圖省事的話直接在“頁腳html代碼”這欄粘貼第6步的代碼即可。
感謝
- https://www.lokeshdhakar.com/projects/lightbox2/
- https://zhidao.baidu.com/question/425775414715605372.html
- https://www.cnblogs.com/Renyi-Fan/p/9223912.html#_labelTop