-
Notifications
You must be signed in to change notification settings - Fork 2
/
viewer-no-dep.html
47 lines (47 loc) · 1.8 KB
/
viewer-no-dep.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
<html>
<head>
<title>tiny</title>
<style>
#mf { width: 400px; }
#th { width:220px; border-right: 1px solid #999; margin: 5px; float:left; height:90%; overflow-y:scroll; }
#main { margin-top:30px; margin-left:10px; float:left; height:90%;}
.tc { display: inline-block; padding:5px; cursor: pointer; }
#big { height:95%; }
</style>
</head>
<body>
<h1>Minimal</h1>
<div>
<input id="mf" type="text" value="https://wellcomelibrary.org/iiif/b18035723/manifest" />
<input id="go" type="button" value="Go" />
</div>
<div>
<div id="th"></div><div id="main"><img id="big" /></div>
</div>
<script>
function $(id){ return document.getElementById(id)};
function p(w){ return '/full/' + w + ',/0/default.jpg'};
function thm(){ $('big').src=this.getAttribute('data-uri') + p(700); };
function go(){
rq = new XMLHttpRequest();
rq.open('GET', $('mf').value, true);
rq.onload = function() {
mf = JSON.parse(rq.responseText);
$('th').innerHTML="";
cvs = mf.sequences[0].canvases;
s = "";
mf.sequences[0].canvases.forEach(function(cv,i){
iiif = cv.images[0].resource.service["@id"];
s += '<div class="tc">' + cv.label + '<br/><img id="im' + i + '" data-uri="' + iiif + '" src="' + iiif + p(90) + '" /></div>';
});
$('th').innerHTML = s;
document.querySelectorAll('#th img').forEach(function(th){th.addEventListener('click', thm)});
$('im0').click();
};
rq.send();
}
$('go').onclick=go;
go();
</script>
</body>
</html>