Skip to content

Instantly share code, notes, and snippets.

@pbinkley

pbinkley/index.html

Last active June 3, 2021 15:30
Show Gist options
  • Save pbinkley/953fb86f9fd922d4ee0a2471f2c2ebd9 to your computer and use it in GitHub Desktop.
Save pbinkley/953fb86f9fd922d4ee0a2471f2c2ebd9 to your computer and use it in GitHub Desktop.
Download ZIP
Self-contained html file for showing OpenSeadragon view of a IIIF image
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/images/logo16.png">
<title>IIIF Tile Source | OpenSeadragon</title>
<link rel='stylesheet'
type='text/css'
media='screen'
href='https://openseadragon.github.io/css/style.css'/>
<style type='text/css'>
#container {
width: 100%;
}
.openseadragon {
width: 100%;
height: 100vh;
}
.demoheading {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
background-color: white;
}
</style>
<script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
</head>
<body>
<div class="demoarea">
<div class="demoheading">
Example XMLHTTPRequest for IIIF info JSON, adaped from <a href="https://openseadragon.github.io/examples/tilesource-iiif/">OpenSeadragon</a>
</div>
<div id="example-xmlhttprequest-for-info-json"
class="openseadragon">
<script type="text/javascript">
OpenSeadragon({
id: "example-xmlhttprequest-for-info-json",
prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
tileSources: [
"https://cdm17191.contentdm.oclc.org/iiif/2/swingle:2540/info.json"
],
// Show rotation buttons
showRotationControl: true,
// Enable touch rotation on tactile devices
gestureSettingsTouch: {
pinchRotate: true
},
showNavigator:true
});
viewer.addHandler("canvas-click", eventHandler, {eventType:"viewer canvas-click"});
viewer.addHandler("canvas-press", eventHandler, {eventType:"viewer canvas-click"});
viewer.addHandler("pan", eventHandler, {eventType:"viewer pan"});
viewer.navigator.addHandler("canvas-click", eventHandler, {eventType:"navigator release"});
viewer.navigator.addHandler("canvas-press", eventHandler, {eventType:"navigator canvas-click"});
viewer.navigator.addHandler("pan", eventHandler, {eventType:"navigator pan"});
function eventHandler(event, obj){
console.log(event.eventSource.id);
document.getElementById("debug").innerHTML = "Debug info:"+event.eventSource.id+ " " + event.userData.eventType;
}
</script>
<noscript>
<p>OpenSeadragon is not available unless JavaScript is enabled.</p>
</noscript>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment