-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·50 lines (41 loc) · 2.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Photo Cylinder</title>
<link href="./css/photo-cylinder.css" rel="stylesheet" />
<script src="./js/photo-cylinder.js" type="module"></script>
</head>
<body style="font-family:sans-serif; background-color:white; color:black; padding:2rem;">
<section style="max-width:32rem; margin:0 auto;">
<ul id="photocylinder" style="display:flex; flex-wrap:wrap; gap:2px; margin:0; padding:0;">
<li style="display:contents;"><a style="display:block; flex: 1 1 auto;" href="img/p4080071.jpg"><img style="display:block; object-fit:cover; width:100%; height:160px;" alt="" src="./img/p4080071_small.jpg"/></a></li>
<li style="display:contents;"><a style="display:block; flex: 1 1 auto;" href="img/p4080072.jpg"><img style="display:block; object-fit:cover; width:100%; height:160px;" alt="" src="./img/p4080072_small.jpg"/></a></li>
<li style="display:contents;"><a style="display:block; flex: 1 1 auto;" href="img/r0012077.jpg"><img style="display:block; object-fit:cover; width:100%; height:160px;" alt="" src="./img/r0012077_small.jpg"/></a></li>
<li style="display:contents;"><a style="display:block; flex: 1 1 auto;" href="img/p4080073_p4080082.jpg"><img style="display:block; object-fit:cover; width:100%; height:160px;" alt="" src="./img/p4080073_p4080082_small.jpg"/></a></li>
<li style="display:contents;"><a style="display:block; flex: 1 1 auto;" href="img/dsc_7043_dsc_7050.jpg"><img style="display:block; object-fit:cover; width:100%; height:160px;" alt="" src="./img/dsc_7043_dsc_7050_small.jpg"/></a></li>
<li style="display:contents;"><a style="display:block; flex: 1 1 auto;" href="img/r0012880.jpg"><img style="display:block; object-fit:cover; width:100%; height:160px;" alt="" src="./img/r0012880_small.jpg"/></a></li>
</ul>
<script>
const photos = [...document.querySelectorAll('#photocylinder a')];
const urls = photos.map((photo) => photo.href);
for(let photo of photos) {
photo.addEventListener('click', (evt) => {
evt.preventDefault();
new PhotoCylinder({
'url': photo.href,
'sequence': urls,
'container': document.body,
'fov': (/r0\d{6}/i.test(photo.href)) ? 360 : 180,
'idle': 0.1,
'navigated': (url) => {},
'opened': (url) => {},
'closed': () => {}
});
});
}
</script>
</section>
</body>
</html>