-
Notifications
You must be signed in to change notification settings - Fork 2
/
viewer.html
39 lines (39 loc) · 1.49 KB
/
viewer.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
<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 class="go" type="button" value="Go" />
</div>
<div>
<div id="th"></div><div id="main"><img id="big" /></div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$('input.go').click(function() {
$.getJSON( $('#mf').val(), function( mf ) {
$('#th').empty();
$.each(mf.sequences[0].canvases, function(i, cv){
iiif = cv.images[0].resource.service["@id"];
$('#th').append('<div class="tc">' + cv.label + '<br/><img data-uri="' + iiif + '" src="' + iiif + '/full/90,/0/default.jpg" /></div>')
});
$('#th img').click(function(){
$('#big').attr('src', $(this).attr('data-uri') + '/full/700,/0/default.jpg');
});
$('#th img')[0].click();
});
});
$('input.go').click();
</script>
</body>
</html>