You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
198 lines
6.2 KiB
198 lines
6.2 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
|
|
<link rel="stylesheet" href="styles.css" type="text/css" />
|
|
|
|
<style type="text/css">
|
|
body {
|
|
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
|
|
font-size:12px;
|
|
color:#333;
|
|
padding:0px;
|
|
margin:0 auto;
|
|
background-color: #E6E6E6;
|
|
}
|
|
|
|
h2 {
|
|
color:#333;
|
|
font-weight: normal;
|
|
margin: 0px 0px 0px 0px;
|
|
padding: 10px 0px 0px 0px;
|
|
}
|
|
|
|
#content {
|
|
overflow:hidden;
|
|
margin:0 auto;
|
|
width:100%;
|
|
padding-top:18px;
|
|
padding-bottom:20px;
|
|
margin-bottom:10px;
|
|
background-color: #FFFFFF;
|
|
border-left:1px #666 solid;
|
|
border-right:1px #666 solid;
|
|
border-bottom:1px #666 solid;
|
|
}
|
|
|
|
#boardContent {
|
|
float:left;
|
|
text-align:left;
|
|
width:100%;
|
|
padding: 0px 10px 0px 10px;
|
|
border-left: 1px solid #D8DFEA;
|
|
border-right: 1px solid #D8DFEA;
|
|
}
|
|
|
|
#mainPage {
|
|
width:100%;
|
|
height: 100%;
|
|
padding: 10px 10px 0px 10px;
|
|
}
|
|
</style>
|
|
|
|
<title>Uniboard</title>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var currentPageIndex = 0;
|
|
|
|
function bodyonload(){
|
|
selectPage(0);
|
|
}
|
|
|
|
function getPageUrlForIndex(pageIndex) {
|
|
|
|
var pageUrl = "page";
|
|
|
|
if(pageIndex < 9)
|
|
pageUrl += "00";
|
|
else if(pageIndex < 99)
|
|
pageUrl += "0";
|
|
|
|
pageUrl += (pageIndex + 1) + ".svg"
|
|
|
|
return pageUrl;
|
|
}
|
|
|
|
function getThumbUrlForIndex(pageIndex) {
|
|
|
|
var pageUrl = "page";
|
|
|
|
if(pageIndex < 9)
|
|
pageUrl += "00";
|
|
else if(pageIndex < 99)
|
|
pageUrl += "0";
|
|
|
|
pageUrl += (pageIndex + 1) + ".thumbnail.jpg"
|
|
|
|
return pageUrl;
|
|
}
|
|
|
|
|
|
function selectPage(pageIndex) {
|
|
|
|
currentPageIndex = pageIndex;
|
|
|
|
loadPage('mainPage', getPageUrlForIndex(pageIndex));
|
|
|
|
var i;
|
|
for (i = 0; i < 4; i++)
|
|
{
|
|
loadThumb("thumb" + (i + 1), getThumbUrlForIndex(pageIndex + i));
|
|
}
|
|
}
|
|
|
|
function loadPage(target, url)
|
|
{
|
|
var mainPage = window.document.getElementById(target);
|
|
|
|
mainPage.style.opacity = .0;
|
|
mainPage.data = url;
|
|
|
|
var speed = 50;
|
|
var timer = 0;
|
|
|
|
//fade in page
|
|
for(i = 0; i <= 10; i++) {
|
|
setTimeout("changeOpac(" + i * 10 + ", '" + target + "')",(timer * speed));
|
|
timer++;
|
|
}
|
|
}
|
|
|
|
function loadThumb(target, url)
|
|
{
|
|
var thumb = window.document.getElementById(target);
|
|
|
|
thumb.src = url;
|
|
|
|
}
|
|
|
|
function previousPage(){
|
|
if (currentPageIndex > 0)
|
|
selectPage(currentPageIndex - 1);
|
|
}
|
|
|
|
function nextPage(){
|
|
selectPage(currentPageIndex + 1);
|
|
}
|
|
|
|
//change the opacity for different browsers
|
|
function changeOpac(opacity, id) {
|
|
var object = document.getElementById(id).style;
|
|
var pc = (opacity / 100);
|
|
object.opacity = pc;
|
|
object.MozOpacity = pc;
|
|
object.KhtmlOpacity = pc;
|
|
object.filter = "alpha(opacity=" + opacity + ")";
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body onLoad="bodyonload()">
|
|
|
|
<div id="container">
|
|
|
|
<div id="content">
|
|
|
|
<div id="boardContent">
|
|
<div>
|
|
<table>
|
|
<tr>
|
|
<td><h2><div onClick="previousPage()"><</div></h2></td>
|
|
<td><h2><div onClick="nextPage()">></div></h2></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<object id="mainPage" class="uniboardPage" type="image/svg+xml" name="mainPage" width="100%" />
|
|
</tr>
|
|
|
|
<!--
|
|
<tr>
|
|
<td width="25%">
|
|
<img id="thumb1" class="thumbnail" type="image/jpg" name="thumb1" width="100%"/>
|
|
</td>
|
|
<td width="25%">
|
|
<img id="thumb2" class="thumbnail" type="image/jpg" name="thumb2" width="100%"/>
|
|
</td>
|
|
<td width="25%">
|
|
<img id="thumb3" class="thumbnail" type="image/jpg" name="thumb3" width="100%"/>
|
|
</td>
|
|
<td width="25%">
|
|
<img id="thumb4" class="thumbnail" type="image/jpg" name="thumb4" width="100%"/>
|
|
</td>
|
|
</tr>
|
|
-->
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|