JavaScript图片弹出显示插件

作者：久伴轻尘时间：2021年08月19日阅读数：1536

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

Reusable JavaScript UI Component Library

引入插件

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

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

<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做一个处理

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