博客园文章图片点击放大功能升级

时间 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

7.保存并查看效果

伸手党福利

啰嗦了这么多，假如你想偷懒图省事的话直接在“页脚html代码”这栏粘贴第6步的代码便可。