博客園文章圖片點擊放大功能升級

時間 2019-12-10

標籤博客文章圖片點擊放大功能升級简体版

原文原文鏈接

寫在前面

在此以前本博的圖片放大功能是採用的zoom.js，查看效果並不友好，圖片放大後模糊不清。具體操做步驟再也不贅述，詳細移步：http://www.javashuo.com/article/p-mdebxrsj-g.htmljavascript

功能升級

本次進行功能升級，採用lightbox。css

特點

圖片點擊後根據實際尺寸自動顯示
圖片加載與關閉淡入淡出
通篇文章圖片放入集合中，能夠按次序瀏覽
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標籤添加了屬性：html

data-lightbox="example-set"

屬性值能夠任意，其差異在https://www.lokeshdhakar.com/projects/lightbox2/中說的很詳細。java

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

爲了便於查看修改，並不打算用壓縮後的mini文件，而是打開C:\Users\Administrator\Downloads\lightbox2-master\dist\css\lightbox.css（由於這兩個文件內容徹底同樣，mini只是壓縮版本）jquery

搜索「..」或者搜索「background: url」，共四處引用了圖片，也就是C:\Users\Administrator\Downloads\lightbox2-master\dist\images路徑下的四張圖片（關閉，上一張，下一張，加載），將這四張圖片重命名並經過後臺上傳到博客園文件，由於png後綴文件不支持上傳，我這裏將png後綴的圖片改成了ico後綴，熟悉ps的都知道這兩種後綴都是透明背景（僞裝很懂）。ide

4.修改css文件中相應圖片的路徑，並上傳至博客園（1個文件）

修改lightbox.css文件中的「background: url」，和剛上傳的四張圖片路徑一一對應，保存lightbox.css並上傳。post

5.上傳lightbox-plus-jquery.js（1個文件）

將C:\Users\Administrator\Downloads\lightbox2-master\dist\js\lightbox-plus-jquery.js文件上傳至博客園。this

至此，共上傳了6份文件，js、css與4張圖片。url

6.引用上傳的css和js文件

在「頁腳html代碼」一欄引入剛上傳的css和js文件，除此以外還要給img標籤外包裹一層a標籤，並添加data-lightbox='example-set'屬性（須要移除代碼摺疊按鈕的父元素）：spa

<!-- 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>

View Code