Viewer，一款好用的图片预览插件-阿里云开发者社区

Viewer，一款好用的图片预览插件

2022-11-09 628

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在项目中，需要点击查看图片，本次我用了 viewer 这款插件

本次用到的 css，js 文件已经上传至百度网盘：

链接：https://pan.baidu.com/s/1N5cvkk0mHV-8gDk240oByA 
提取码：l6kw

1、引入 css 和 js 文件

<!-- 图片查看器 css -->
<link rel="stylesheet" href="<%=path%>/js/viewer/viewer.min.css" />
<!-- 图片查看器 js -->
<script src="<%=path %>/js/viewer/viewer.min.js"></script>

2、将需要展示的图片放入 HTML 中，并为每一张图片绑定点击事件

<div class="img_content" style="padding: 10px 10px;">
    <c:forEach items="${photo}" var="item" varStatus="indexStatus">
        <img src="<%=path%>/upload/${item.photo}" title="盘点照片" style="width: 100px;height: 100px" index="${indexStatus.index}" onclick="showImg(this)">
    </c:forEach>
</div>

3、在 HTML 中建立一个图片查看器的实例，此时是隐藏的：display: none; ${photo} 为你需要查看图片的 List
数组

<!-- 查看图片 -->
<ul id="viewer" style="display: none;">
    <c:forEach items="${photo}" var="item" varStatus="indexStatus">
        <li index="${indexStatus.index}"><img class="viewer-img" src="<%=path%>/upload${item.photo}"></li>
    </c:forEach>
</ul>

如果是多个图片组的话，我们在建立图片查看器实例的时候，不需要去渲染图片，只需要如下操作：

<!-- 查看图片 -->
<ul id="viewer" style="display: none">
    <li index="0"><img class="viewer-img" src=""></li>
</ul>

4、在页面加载时初始化图片查看插件

$(function () {
    // 初始化图片查看插件
    $('#viewer').viewer({
        title: false,
    });
});

5、图片的点击事件

// 查看图片
function showImg(obj) {
    $('#viewer').children('li').eq($(obj).attr('index')).children('img').click();
}

6、如果页面有多个图片组，我们在点击的时候，需要更换图片组，则图片的点击事件为：

// 查看图片
function showImg(obj) {
    var index = $(obj).data("index");
    var url = $(obj).attr("src");
    var str = '';
    var urlArr = url.split(",");
    for(var i = 0,len = urlArr.length;i < len;i++){
        str += '<li index="'+i+'"><img class="viewer-img" src="<%=path%>/upload'+urlArr[i]+'"></li>';
    }
    // 替换图片查看器实例里面的内容
    $('#viewer').html(str);
    // 执行更新
    $('#viewer').viewer('update');
    $('#viewer').children('li').eq(index).children('img').click();
}