第一步
<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>