title: OpenSeadragon Annotorious
body: <p>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.</p>
  <p>Here's my code:</p>
  <pre><code>
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id=&quot;openseadragon1&quot; style=&quot;width: 1000px; height: 600px;&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;example-overlay&quot; style = &quot;width: 1000px; height: 600px&quot; &gt;&lt;/div&gt;
  &lt;script src=&quot;openseadragon-bin-2.4.2/openseadragon-bin-2.4.2/openseadragon.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;openseadragon-annotorious.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      console.log(5+6);
     window.onload = function(){
          var viewer = OpenSeadragon({
          id: &quot;openseadragon1&quot;,
          prefixUrl:     &quot;openseadragon-bin-2.4.2/openseadragon-bin-2.4.2/images/&quot;,
          navigatorSizeRatio: 0.25,
          wrapHorizontal:     true,
          tileSources:   {
              height: 512*256,
              width:  512*256,
              tileSize: 256,
              minLevel: 8,
  
        
  
              getTileUrl: function( level, x, y ){
                  return &quot;http://s3.amazonaws.com/com.modestmaps.bluemarble/&quot; +
                          (level-8) + &quot;-r&quot; + y + &quot;-c&quot; + x + &quot;.jpg&quot;;
          }
  }
  });
     
    // 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!');
      });
  }
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  </code></pre>