-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (111 loc) · 5.15 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Specimens</title>
<!-- Favicon links -->
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/site.webmanifest">
<!-- CSS link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- Title for the collection -->
<div class="title">
<!-- Entomological Collection<br> <span class="bold-text">ETH Zürich</span> -->
<span class="bold-text">Entomological Collection</span><br> ETH Zürich
<!-- <a href="page1.html">More Specimens</a> -->
</div>
<!-- Iframe container -->
<div class="iframe-container" id="iframe-container">
<iframe id="main-iframe"></iframe>
</div>
<!-- Thumbnails row -->
<div class="thumbnails" id="thumbnails"></div>
<!-- <footer class="footer">
<p><span class="bold-text">Credits:</span> Michael, Christian, Silvan, Fabian & Dustin</p>
</footer> -->
</div>
<script>
// Array of UIDs only
const uids = [
'186716d9173943269fe4685048e0e48b',
'907288ad304f491a9da9cc1df71cc23a',
'71293753a6c74fcfa1ff5e4aa236343b',
'ae1c872b7d97469eb49980466e733d90',
'7a3d5b51e98749b48d43bab53e2ef1ad',
'241d649c930a40ec9d76b1c6aecf2927',
'c01c0017837e47e1a7d45a5cced55af8',
'15226121c85b4ce5b7b526a4f695cde0',
'3b6db05836774842bdcdcc27791feabe',
'69bb2b5d19c249caabb4403c220489d3',
'b37d1a95fc404ac9b50b54f2562f355f',
'07751fef4d054c769688cb69e6980b79',
'7df8f18d57154d8da50a6de0aa108abf',
'0d35c0373df14cf1bd85ec6855a024c9',
'b31b83e6b05f4f7ba72403eeb013aafd',
'bef800bc77784f5a84d66cebf7142aa8',
'ebbb35de6092456b901ff4cd95a7c87a',
'00460b4621084f37b7e8b9390aa905d6',
'3da27c9893d3448e86fcaa9cab072912',
'3e1a5d1c0bda4a39a9a6c68a44624320',
'd159c8195c274573ba4ba37ae7e0d418',
'f2a9b5478cac4e38b69044db9a96db78',
'12aefb81899e45ae88b0a70d6995f038',
'f0c24e67a7de4c3f985c00d9ba67c42c',
'207e074e263b4b2d8a178fee1d27855a',
'dafde7bf92db4d8cb165f3f884936c5a',
];
// Function to change the iframe source
function changeIframe(url) {
document.getElementById('main-iframe').src = url; // Update the iframe source
}
// Populate the thumbnails dynamically using UIDs
const thumbnailsContainer = document.getElementById('thumbnails');
uids.forEach((uid, index) => {
const thumbnailDiv = document.createElement('div');
thumbnailDiv.className = 'thumbnail';
thumbnailDiv.onclick = () => changeIframe(`https://tinyglb.com/viewer/${uid}`);
const img = document.createElement('img');
img.src = `https://cdn.tinyglb.com/posters/${uid}.webp`;
img.alt = `Thumbnail for ${uid}`;
// Only append the thumbnail if the image loads successfully
img.onload = () => {
thumbnailDiv.appendChild(img);
thumbnailsContainer.appendChild(thumbnailDiv);
// If this is the first thumbnail, load its URL in the iframe
if (index === 0) {
changeIframe(`https://tinyglb.com/viewer/${uid}`);
}
};
// If the image fails to load, it won't be added to the DOM
img.onerror = () => {
console.warn(`Image not found for UID: ${uid}`);
};
});
// Enable horizontal scrolling on mouse wheel
thumbnailsContainer.addEventListener('wheel', (event) => {
event.preventDefault(); // Prevent the default vertical scrolling
thumbnailsContainer.scrollLeft += event.deltaY; // Scroll horizontally based on the vertical scroll amount
});
function adjustThumbnailAlignment() {
const thumbnailsContainer = document.getElementById('thumbnails');
const totalThumbnailWidth = Array.from(thumbnailsContainer.children).reduce((total, thumb) => {
return total + thumb.offsetWidth + parseFloat(getComputedStyle(thumb).marginRight);
}, 0);
if (totalThumbnailWidth < window.innerWidth) {
thumbnailsContainer.style.justifyContent = 'center';
} else {
thumbnailsContainer.style.justifyContent = 'flex-start';
}
}
// Call the function on initial load and when the window resizes
window.addEventListener('load', adjustThumbnailAlignment);
window.addEventListener('resize', adjustThumbnailAlignment);
</script>
</body>
</html>