viewer.js使用
叶举
基本的使用可以查看demo和文档
https://github.com/fengyuanchen/viewerjs
https://fengyuanchen.github.io/viewerjs/
这里只说我使用过程中遇到的两个问题
1.动态加载的图片无法查看
针对这个问题，可以使用update()方法来更新，将新加载的图片放到viewer实例中，注意是在新的标签写到页面后调用。
2.限制哪些图片可以通过viewer.js查看
项目中我们也常遇见只需要部分图片是需要被查看，比如，做一个聊天室，那么用户头像肯定是不需要被查看的，我们只需要能查看好友双方发送的图片即可，这时就可以使用filter函数来过滤出来需要显示的图片，注意需要显示的图片，应该返回true。
以下为改过的官方demo，可供演示查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Viewer.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="viewer.css">
<style>
.pictures {
list-style: none;
margin: 0;
max-width: 30rem;
padding: 0;
}
.pictures > li {
border: 1px solid transparent;
float: left;
height: calc(100% / 3);
margin: 0 -1px -1px 0;
overflow: hidden;
width: calc(100% / 3);
}
.pictures > li > img {
cursor: zoom-in;
width: 100%;
}
.viewer-download {
color: #fff;
font-family: FontAwesome, serif;
font-size: 0.75rem;
line-height: 1.5rem;
text-align: center;
}
.viewer-download::before {
content: "\f019";
}
</style>
</head>
<body>
<div class="container">
<h1 onclick="add()">点击新增图片</h1>
<div id="galley">
<ul class="pictures">
<li><img data-original="./img/tibet-1.jpg" src="./img/tibet-1.jpg" alt="Cuo Na Lake" class='img_show'></li>
<li><img data-original="./img/tibet-2.jpg" src="./img/tibet-2.jpg" alt="Tibetan Plateau" class=''></li>
<li><img data-original="./img/tibet-3.jpg" src="./img/tibet-3.jpg" alt="Potala Palace 2" class='img_show'></li>
<li><img data-original="./img/tibet-4.jpg" src="./img/tibet-4.jpg" alt="Potala Palace 3" class='img_show'></li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="viewer-1.4.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var galley = document.getElementById('galley');
viewer = new Viewer(galley, {
url: 'data-original',
toolbar: {
oneToOne: true,
prev: function() {
viewer.prev(true);
},
play: true,
next: function() {
viewer.next(true);
},
download: function() {
const a = document.createElement('a');
a.href = viewer.image.src;
a.download = viewer.image.alt;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
},
},
filter:function(img){
return $(img).hasClass('img_show');
}
});
});
function add(){
var html = '<li>'
+'<img data-original="./img/tibet-7.jpg" src="./img/tibet-7.jpg" class="img_show">'
+'</li>';
$(".pictures").append(html);
viewer.update(); //更新viewer实例
}
</script>
</body>
</html>
类似资料：