Skip to content

Instantly share code, notes, and snippets.

@rsimon
Created June 15, 2016 06:57
Show Gist options
  • Save rsimon/7862c479b6c1ac8107d731e4d387d8ee to your computer and use it in GitHub Desktop.
Save rsimon/7862c479b6c1ac8107d731e4d387d8ee to your computer and use it in GitHub Desktop.
<html>
<head>
<title>Annotorious OpenSeadragon Test Page</title>
<script src="openseadragon/openseadragon.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/theme-dark/annotorious-dark.css" />
<script type="text/javascript" src="http://localhost:9810/compile?id=annotorious"></script>
<script type="text/javascript">
annotorious.plugin.HelloWorldPlugin = function(opt_config_options) { }
annotorious.plugin.HelloWorldPlugin.prototype.initPlugin = function(anno) {
// Add initialization code here, if needed (or just skip this method if not)
}
annotorious.plugin.HelloWorldPlugin.prototype.onInitAnnotator = function(annotator) {
// A Field can be an HTML string or a function(annotation) that returns a string
annotator.popup.addField(function(annotation) {
return '<a href = "https://flic.kr/p/DfLZic/"><img src="button.gif" alt="Click me"></a>'
});
}
// Add the plugin like so
anno.addPlugin('HelloWorldPlugin', {});
</script>
<script type="text/javascript">
window.onload = function() {
var viewer = OpenSeadragon({
id: "openseadragon",
prefixUrl: "openseadragon/images/",
showNavigator: false,
tileSources: {
type: 'legacy-image-pyramid',
levels:[{
url: '2003rosen1799/0001q.jpg',
height: 889,
width: 600
},{
url: '2003rosen1799/0001r.jpg',
height: 2201,
width: 1485
},{
url: '2003rosen1799/0001v.jpg',
height: 4402,
width: 2970
}]
}
});
anno.makeAnnotatable(viewer);
}
</script>
<style>
#openseadragon {
position:absolute;
width:800px;
height:600px;
}
#add-annotation-button {
position:absolute;
top:14px;
left:155px;
}
</style>
</head>
<body>
<div id="openseadragon"></div>
<button id="add-annotation-button" onclick="anno.activateSelector();">Add Annotation</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment