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

写在前面

在此之前本博的图片放大功能是采用的zoom.js，查看效果并不友好，图片放大后模糊不清。具体操作步骤不再赘述，详细移步：https://www.cnblogs.com/yadongliang/p/9327659.html

功能升级

本次进行功能升级，采用lightbox。

特色

点击查看效果图

详细操作步骤

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步的代码即可。

 

 

 

感谢

 

posted @ 2019-05-13 21:39  习惯沉淀  阅读(2349)  评论(7)  编辑  收藏  举报