258 lines
5.8 KiB
HTML
258 lines
5.8 KiB
HTML
<html>
|
|
<head>
|
|
<script>
|
|
|
|
var vImage = new Array(
|
|
%s)
|
|
var vThumb = new Array(
|
|
%s)
|
|
var cImage = %d
|
|
|
|
var runSlidesFlag = 0
|
|
var iImage = 0
|
|
var Mode = ""
|
|
var isIE = 0
|
|
|
|
function loadedDoc()
|
|
{
|
|
if (navigator.appName == "Netscape" || navigator.appName.indexOf("Microsoft") == -1)
|
|
{
|
|
top.location.href = "viewern.htm"
|
|
}
|
|
|
|
var preload = new Image()
|
|
preload.src = vImage[0]
|
|
|
|
for (i = 0 ; i < vThumb.length ; i++)
|
|
{
|
|
contact.insertAdjacentHTML("beforeEnd", "<img onclick=filmJump(" + i + ") class=THUMB style=\"padding: 20px\" src=\"" + vThumb[i] + "\">")
|
|
}
|
|
|
|
var filmThumbsText = "<table style=\"overflow-x: scroll\"><tr>"
|
|
for (i = 0 ; i < vThumb.length ; i++)
|
|
{
|
|
filmThumbsText = filmThumbsText + "<td id=filmThumb" + i + "><img onclick=filmSelect(" + i + ") class=THUMB style=\"padding: 20px\" src=\"" + vThumb[i] + "\"></td>"
|
|
}
|
|
filmThumbsText = filmThumbsText + "</tr></table>"
|
|
filmthumbs.innerHTML = filmThumbsText
|
|
|
|
if (navigator.appName != "Netscape" || navigator.appName.indexOf("Microsoft") != -1)
|
|
{
|
|
isIE = 1
|
|
}
|
|
if (isIE)
|
|
{
|
|
|
|
filmmain.style.cursor = "hand"
|
|
slidemain.style.cursor = "hand"
|
|
controls.style.display = ""
|
|
Slideshow()
|
|
}
|
|
else
|
|
{
|
|
}
|
|
Ticker()
|
|
}
|
|
|
|
function Ticker()
|
|
{
|
|
setTimeout("Ticker()", 1000)
|
|
if (runSlidesFlag == 1) {
|
|
if (Mode == "Slideshow") {
|
|
nextImage()
|
|
}
|
|
}
|
|
}
|
|
|
|
function Film()
|
|
{
|
|
if (isIE)
|
|
{
|
|
Mode = "Film"
|
|
film.style.display = ""
|
|
filmthumbs.style.display = ""
|
|
contact.style.display = "none"
|
|
slideshow.style.display = "none"
|
|
slideshowbuttons.style.display="none"
|
|
filmSelect(iImage)
|
|
doResize()
|
|
}
|
|
else
|
|
{
|
|
}
|
|
}
|
|
|
|
function Slideshow()
|
|
{
|
|
if (isIE)
|
|
{
|
|
Mode = "Slideshow"
|
|
slideshow.style.display = ""
|
|
slideshowbuttons.style.display=""
|
|
contact.style.display = "none"
|
|
film.style.display = "none"
|
|
filmthumbs.style.display = "none"
|
|
slidemain.src = vImage[iImage]
|
|
doResize()
|
|
}
|
|
else
|
|
{
|
|
}
|
|
}
|
|
|
|
function Contact()
|
|
{
|
|
if (isIE)
|
|
{
|
|
Mode = "Contact"
|
|
contact.style.display = ""
|
|
slideshow.style.display = "none"
|
|
slideshowbuttons.style.display="none"
|
|
film.style.display = "none"
|
|
filmthumbs.style.display = "none"
|
|
}
|
|
else
|
|
{
|
|
}
|
|
}
|
|
|
|
function nextImage()
|
|
{
|
|
iImage = (iImage + vImage.length + 1) % vImage.length
|
|
if (isIE)
|
|
{
|
|
slidemain.src = vImage[iImage]
|
|
}
|
|
else
|
|
{
|
|
}
|
|
}
|
|
|
|
function prevImage()
|
|
{
|
|
iImage = (iImage + vImage.length - 1) % vImage.length
|
|
if (isIE)
|
|
{
|
|
slidemain.src = vImage[iImage]
|
|
}
|
|
else
|
|
{
|
|
}
|
|
}
|
|
|
|
function runSlides()
|
|
{
|
|
runSlidesFlag = (runSlidesFlag + 1) % 2
|
|
if (isIE)
|
|
{
|
|
if (runSlidesFlag == 1)
|
|
{
|
|
runButton.value = "Stop"
|
|
}
|
|
else
|
|
{
|
|
runButton.value = "Play"
|
|
}
|
|
}
|
|
}
|
|
|
|
function filmSelect(i)
|
|
{
|
|
iImage = i;
|
|
if (isIE)
|
|
{
|
|
filmmain.src = vImage[i];
|
|
for (var j = 0 ; j < cImage ; j++)
|
|
{
|
|
document.all["filmThumb"+j].style.background=""
|
|
}
|
|
document.all["filmThumb"+i].style.background= "blue"
|
|
}
|
|
else
|
|
{
|
|
}
|
|
}
|
|
|
|
function filmJump(i)
|
|
{
|
|
iImage = i;
|
|
Film();
|
|
}
|
|
|
|
function nextFilmImage()
|
|
{
|
|
filmSelect((iImage + vImage.length + 1) % vImage.length)
|
|
}
|
|
|
|
function contactSelect(i)
|
|
{
|
|
if (isIE)
|
|
{
|
|
iImage = i
|
|
Film()
|
|
filmmain.src = vImage[i]
|
|
doResize()
|
|
}
|
|
else
|
|
{
|
|
}
|
|
}
|
|
|
|
function doResize()
|
|
{
|
|
if (isIE)
|
|
{
|
|
filmmain.height = document.body.clientHeight - document.all.controls.offsetHeight - document.all.filmthumbs.offsetHeight - 10
|
|
slidemain.height = document.body.clientHeight - document.all.controls.offsetHeight - document.all.slideshowbuttons.offsetHeight - 10
|
|
|
|
if (document.body.clientWidth < filmmain.width)
|
|
{
|
|
filmmain.height = document.body.clientWidth * filmmain.height / filmmain.width;
|
|
}
|
|
if (document.body.clientWidth < slidemain.width)
|
|
{
|
|
slidemain.height = document.body.clientWidth * slidemain.height / slidemain.width;
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style>
|
|
TD { valign: center }
|
|
TR { align: center }
|
|
IMG.THUMB { padding: 20px; cursor: hand;}
|
|
BODY { margin: 0; }
|
|
|
|
</style>
|
|
<body onLoad="loadedDoc()" onResize="doResize()" link="#03a0fc" vlink="#03a0fc">
|
|
<table id=controls style="width: 100%; display:none" cellspacing=0 cellpadding=0>
|
|
<tr align=right>
|
|
<td><div class=CONTROLS style="cursor: hand; font-size: 12pt; color:#03a0fc; font-family: Trebuchet MS, Arial, sans-serif" onclick="Film()">Film Strip</div>
|
|
<tr align=right>
|
|
<td><div class=CONTROLS style="cursor: hand; font-size: 12pt; color:#03a0fc; font-family: Trebuchet MS, Arial, sans-serif" onclick="Slideshow()">Slideshow</div>
|
|
<tr align=right>
|
|
<td><div class=CONTROLS style="cursor: hand; font-size: 12pt; color:#03a0fc; font-family: Trebuchet MS, Arial, sans-serif" onclick="Contact()">Contact Sheet</div>
|
|
</tr>
|
|
</table>
|
|
|
|
<div id=contact style="width: 100%; display: none"></div>
|
|
|
|
<table id=slideshow style="width: 100%; display: none">
|
|
<tr align=center>
|
|
<td valign=center><img id=slidemain onclick=nextImage() src="">
|
|
</table>
|
|
|
|
<div id=slideshowbuttons>
|
|
<input class=SLIDECONTROLS type=button value="Back" onclick="prevImage()">
|
|
<input class=SLIDECONTROLS id=runButton type=button value="Play" onclick="runSlides()">
|
|
<input class=SLIDECONTROLS type=button value="Forward" onclick="nextImage()">
|
|
</div>
|
|
|
|
<table id=film style="width: 100%; display: none">
|
|
<tr align=center><td valign=center><img alt="" onclick=nextFilmImage() id=filmmain src="">
|
|
</table>
|
|
|
|
<div id=filmthumbs style="width: 100%; height: 120; display:none; overflow-y: none; overflow-x:scroll"></div>
|
|
|
|
</body>
|
|
</html> |