烟雨落轻尘

主题

Js图片放大插件 迁移 ​

博客中有时候会放一些图片，在手机上显示可能不太清楚，需要放大显示，这里给大家推荐一个实用的前端插件 Fancybox

信息

Reusable JavaScript UI Component Library

引入插件 ​

将下文中的css和js引入到需要使用的页面即可

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
    />
  </head>
  <body>
    <!-- Content -->

    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
    <script>
      //  JavaScript will go here
    </script>
  </body>
</html>

使用图片 ​

最主要的是这个 data-fancybox属性,如果是单个可以使用data-fancybox="single"，如果是一组可以使用data-fancybox="group"

html
<a
  href="https://cdn.jiubanqingchen.cn//wish-blog/images/2021-08-20/article/20210820143121.jpeg"
  data-fancybox="single"
>
  <img src="https://cdn.jiubanqingchen.cn//wish-blog/images/2021-08-20/article/20210820143121.jpeg" 
  alt="" width="100%" height="100%" />
</a>

注意：必须按照上面这个格式来写，img上面必须有一个a标签

我们一般都只有图片，那么我们也可以自己用js做一个处理

javascript
$(document).ready(function () {
     $('.content img').each(function(){
     var aa='<a href='+$(this).attr("src")+' data-fancybox="group">';
       $(this).wrap(aa);
     })
});

示例 ​

当然，他还可以使用video,也可以弹出页面，我这里只是用图片就不细说了，想知道更多可以查阅Fancybox文档