viewer.js插件使用示例

1.导入viewer.js和viewer.css文件

<link href="<%=request.getContextPath()%>/viewjs/viewer.min.css" rel="stylesheet" />

<script src="<%=request.getContextPath()%>/viewjs/viewer-jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/viewjs/viewer.min.js"></script>

2.接收后台URL返回，列表展示

//多张图片处理-暂时只显示一张
                    var photoUrls = row.photourl.split("|"); //  数据库储存URL以 “ | ” 隔开
                     if(photoUrls && photoUrls.length > 0){
                        var photoUrlsUL = '<ul id=\''+row.patrolrecordid+'x\' style="display:none;">';
                        for (var int = 0; int < photoUrls.length; int++) {
                            photoUrlsUL +='<li><img data-original=' + photoUrls[int] + ' src="'+photoUrls[int]+'"></li>';
                        }
                        photoUrlsUL += '</ul>';
                        return photoUrlsUL+'<img  οnclick="showPhoto_routingInspectionRecord(\'' + row.patrolrecordid + 'x\')" src="'+photoUrls[0]+'" style="display:flex;justify-content:center;align-items:center;height: 40px;max-width:40px;" />';
                    }

3.点击事件显示

var routingInspectionRecordPhotos = {};
function showPhoto_routingInspectionRecord(pId) {
    if(routingInspectionRecordPhotos[pId]){
        routingInspectionRecordPhotos[pId].show();
    }else{
        var viewer = new Viewer(document.getElementById(pId), {
            url: 'data-original'
        });
        routingInspectionRecordPhotos[pId] = viewer;
        viewer.show();
    }
}