Viewer.js – JS/jQuery图片查看器

效果图:

1、引入文件


   <script type="text/javascript" src="static/viewer/js/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="static/viewer/js/viewer.js"></script>
   <script type="text/javascript" src="static/viewer/js/main.js"></script>

2、HTML

<td class='center' style="width: 200px;"><c:if test="${var.IMAGE !='' && var.IMAGE !=null}">
                                                               <div class="docs-galley">
                                                                   <ul class="docs-pictures clearfix">
                                                                       <c:forEach var="IMAGE" items="${var.IMAGE}">
                                                                           <span><img data-original="<%=basePath%>/uploadFiles/uploadImgs/joinIn/${IMAGE}"
                                                                               src="<%=basePath%>/uploadFiles/uploadImgs/joinIn/${IMAGE}" width="50" height="40px"></span>
                                                                       </c:forEach>
                                                                   </ul>
                                                               </div></c:if>
</td>

3、JavaScript

$('.docs-galley').viewer();

4、js、css文件

https://download.csdn.net/upload/10901292

参考文档:资料链接：http://www.dowebok.com/192.html