-
Notifications
You must be signed in to change notification settings - Fork 2
/
viewer-min.html
1 lines (1 loc) · 1.31 KB
/
viewer-min.html
1
<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>