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://minio.jiubanqingchen.cn//wish-blog/images/2021-08-20/article/20210820143121.jpeg"
data-fancybox="single"
>
<img src="https://minio.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文档