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

 

效果图:

1、引入文件

    <!-- basic scripts -->
    <!-- 图片查看器 -->
    <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