Files
matrix/build/WebContent/WEB-INF/app/operation/reporting/photoviewer.jsp

71 lines
2.4 KiB
Plaintext

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page language="java" session="true" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Nimble 1.0 | Office Verification Report</title>
<link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="/matrix/js/jquery1.7.2.js" type="text/javascript"></script>
<script language="javascript" src="/matrix/js/jquery.multirotation.js" type="text/javascript"></script>
<style type="text/css">
div {
text-align: center;
margin: auto
}
div.container {
position: relative;
margin: auto;
width: 300px;
height: 350px;
}
div.rotable {
position: absolute;
left: 5px;
top: 92px
}
img {
border: none;
}
</style>
</head>
<body>
<div id='PageFrame'>
<div id="formcontainer" style="width:845px;margin-top:5px;position:absolute;z-index:-1">
<!-- Case Details (Section1) Visible for all portfolios-->
<div>
<!-- Title -->
<div id='title' class="title">
<img id="icon" src="/matrix/images/commondet.png" align="absmiddle" />
<span id="title" align="absmiddle">Photo Viewer</span>
</div>
<!-- -->
<div id="divCase" class="FormPanel">
<c:forEach items="${photolist}" var="photo" varStatus="status">
<div class="widget" style="width:410px;border:1px solid #C3C3C3">
<div class="lblcontainer" onclick="$('#preview').attr('src',$('#img-${status.index}').attr('src'));$('.container').show()">
<img id="img-${status.index}" src="http://192.168.10.219:8383/${photo}" height="400" width="400" />
</div>
</div>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="container" style="position:fixed;width:100%;top:0;background-color:#F1F1F1;margin:0 auto">
<div id="img_test" class="rotable" >
<img src="" id="preview" />
</div>
<div style="line-height:30px;background-color:#C3C3C3;text-align:center" onclick="$('.container').hide()">Close</div>
</div>
</body>
<script type="text/javascript" language="javascript">
$(".container").hide();
$("#img_test").click(function () {
$(this).rotate({ angle: 90,speed: 0.5 });
});
</script>
</html>