纳兰性德
  • 微信号:17764149196
您当前的位置:首页  > 前端  > JavaScript

JavaScript图片弹出显示插件

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

博客中有时候会放一些图片,在手机上显示可能不太清楚,需要放大显示,这里给大家推荐一个实用的前端插件 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);
     })
});

示例

点我放大

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

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我删除。邮箱:577955659@qq.com

标签: JavaScript

久伴轻尘

人生若只如初见,何事秋风悲画扇