Skip to content

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文档