So I have been trying to use the annotorius plugin by OpenSeadragon in my website but for some reason the plugin does not even load up. I think there is no issue with the directory part of the things.
Here's my code:
</head>
<body>
<div id="openseadragon1" style="width: 1000px; height: 600px;"></div>
<div id="example-overlay" style = "width: 1000px; height: 600px" ></div>
<script src="openseadragon-bin-2.4.2/openseadragon-bin-2.4.2/openseadragon.min.js"></script>
<script src="openseadragon-annotorious.min.js"></script>
<script type="text/javascript">
console.log(5+6);
window.onload = function(){
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "openseadragon-bin-2.4.2/openseadragon-bin-2.4.2/images/",
navigatorSizeRatio: 0.25,
wrapHorizontal: true,
tileSources: {
height: 512*256,
width: 512*256,
tileSize: 256,
minLevel: 8,
getTileUrl: function( level, x, y ){
return "http://s3.amazonaws.com/com.modestmaps.bluemarble/" +
(level-8) + "-r" + y + "-c" + x + ".jpg";
}
}
});
// Initialize the Annotorious plugin
var anno = OpenSeadragon.Annotorious(viewer);
// Load annotations in W3C WebAnnotation format
anno.loadAnnotations('annotations.w3c.json');
// Attach handlers to listen to events
anno.on('createAnnotation', function(a) {
// Do something
console.log('Created!');
});
}
</script>
</body>
Sorry for posting this as an "answer", but I don't have the reputation points to comment.
Your code looks completely ok. Is the OpenSeadragon image loading properly? If so, you should be able to start annotating by holding the SHIFT button + click and drag with the mouse.
Does the JS console say anything? Can you confirm that the Annotorious plugin script is properly loaded? (E.g. by putting a console.log(anno) right after the init line?)