-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (81 loc) · 2.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!--
index.html
Created by by Dave Hanson on 11/17/2008.
Copyright 2008 Google Inc. All rights reserved.
-->
<html>
<head>
<title>Photos</title>
<style>
.imagelink { text-decoration: underline; cursor: pointer;}
div#imagepage { display: none;}
#navigation, #image { text-align: center;}
div#imagepage table { margin-left: auto; margin-right: auto;}
td#imagetitle { text-align: left; color: gray;}
td#imageurl { text-align: right; color: gray;}
</style>
</head>
<script>
var images = [ {} ];
function pushimage(basename) {
images.push({ image: 'images/' + basename + '.jpg',
thumbnail: 'thumbnails/' + basename + '.png', title: '' });
}
function id(x) {
return typeof x == 'string' ? document.getElementById(x) : x;
}
function imageLink(n, text) {
return [ "<span class='imagelink' title='", images[n].image,
"' onclick='show(", n, ")'>", text, "</span>" ].join('');
}
function prev(n) {
if (n > 1) {
(new Image(0, 600)).src = images[n - 1].image;
id('prev').innerHTML = imageLink(n - 1, 'prev');
} else
id('prev').innerHTML = 'prev';
}
function next(n) {
if (n < images.length - 1) {
(new Image(0, 600)).src = images[n + 1].image;
id('next').innerHTML = imageLink(n + 1, 'next');
} else
id('next').innerHTML= 'next';
}
function show(n) {
id('photo').src = images[n].image;
id('imagetitle').innerHTML = images[n].title;
id('imageurl').innerHTML = images[n].image;
prev(n);
next(n);
flip('block', 'none');
}
function flip(image, index) {
id('imagepage').style.display = image;
id('indexpage').style.display = index;
}
function onLoad() {
var html = ['']; // Build the index.
for (var i = 1; i < images.length; ++i)
html.push(imageLink(i, "<img src='" + images[i].thumbnail + "'>"));
id('index').innerHTML = html.join(' ');
}
</script>
<script type="text/javascript" src="images.js"></script>
<body onload='onLoad()'>
<div id='indexpage'>
<p>Click on thumbnail to see a larger view.</p>
<hr>
<p id='index'></p>
</div>
<div id='imagepage'>
<table>
<tr><td id='navigation' colspan='3'><span id='prev'></span> <span
class='imagelink' title='Back to the index page' onclick="flip('none','block')">index</span> <span
id='next'></span></td></tr>
<tr><td id='image' colspan='3'><img id='photo' src='' height=640></td></tr>
<tr><td id='imagetitle'></td><td></td><td id='imageurl'></td></tr>
</table>
</div>
</body>
</html>