查看图片

第一步

<a class="icon-search ahandle" title="查看修改前图片"  href="javascript:openImgFrontWindow(\''+row.s_recNo+'\');" >      </a>'
<div id="processOptDiv" style="overflow: hidden;">
    <iframe id="processOptIframe" scrolling="auto" frameborder="0" style="width:100%;height:100%;"></iframe>
</div>
<script type="text/javascript" >
function openImgFrontWindow(idx) {
        $("#processOptIframe").attr("src", "${webRoot}/maintain/toshow.do?idx="+idx+"");
        $("#processOptDiv").dialog({
            title: '修改前图片展示',
            width: 800,
            height: 600,
            collapsible: false,
            //minimizable: true,
            maximizable: true,
            resizable: true,
            modal: true,
            onClose: function () {
            $('#processOptDiv').empty();
                $('#processOptDiv').html('<iframe id="processOptIframe" scrolling="auto" frameborder="0" style="width:100%;height:100%;"></iframe>');
            }
        });
    }

</script>

第二步

在Java中

/**
* 修改前图片
* @return
*/
@RequestMapping("toshow")
private String toshow(String idx,ModelMap map){
CollImageinfoDetail imageinfo=maintainService.get(CollImageinfoDetail.class, idx);
map.put("showFront", imageinfo);
return "management/data/maintain/approval/imageFront_view";
}

第三步

在jspimageFront_view页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/include.inc.jsp"%>
   <link rel="stylesheet" href="${webRoot}/resource/js/viewer/css/viewer.min.css">
    <script type="text/javascript" src="${webRoot}/resource/js/jquery/jquery-1.10.2.js"></script>
   <script type="text/javascript" src="${webRoot}/resource/js/viewer/js/viewer-jquery.min.js"></script>
  
<%--
	模块：藏品管理-藏品图片详情
--%>
<ul id="viewer">
        <li><img src="${webRoot}/${ImageSrc}" data-original="${webRoot}/${ImageSrc}" alt="${alt}"></li>
</ul>
<script type="text/javascript" >

$(function(){
console.log("+==="+'${ImageSrc}');
 	$('#viewer').viewer();
});
</script>