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>
|
|
|