Skip to content
This repository has been archived by the owner on Apr 2, 2023. It is now read-only.

Getting Started: Standalone Version

Jump to bottom
rsimon edited this page Jan 22, 2013 · 13 revisions

Getting Started - Standalone Version

Release packages for the latest versions of Annotorious are available here.

How Do I Add Annotorious to My Web Page?

  • Unzip the contents of the package on your server
  • Link the Annotorious CSS file into the <head> of your Web pages
  • Link the Annotorious JavaScript file into the <head> of your Web pages

Example:

<head>
  <link rel="stylesheet" type="text/css" href="css/annotorious.css" />
  <script type="text/javascript" src="annotorious.min.js"></script>
</head>

How Do I Enable Annotation for an Image on My Page?

Once you have linked Annotorious into your Web page, you need to tell it which images should be annotatable. There are two ways you can do this:

Option 1. Add a CSS class called annotatable to the image. This is the easiest way to add annotation functionality, and I'd always recommend using this approach unless your page loads images dynamically via JavaScript, after the page has loaded.

Example:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/annotorious.css" />
    <script type="text/javascript" src="annotorious.min.js"></script>
  </head>
  
  <body>
    <img src="example.jpg" class="annotatable" />
  </body>
</html>

Option 2: Annotation-enable your images via JavaScript, using anno.makeAnnotatable(img); You can use this approach if your page loads images dynamically via JavaScript.

Example:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/annotorious.css" />
    <script type="text/javascript" src="annotorious.min.js"></script>
    <script>
      function init() {
        anno.makeAnnotatable(document.getElementById('myImage')); 
      }
    </script>
  </head>      
  <body onload="init();">
    <img src="example.jpg" id="myImage" />
  </body>
</html>

How Do I Enable Annotation for an OpenLayers-Based Web Map?

The Annotorious OpenLayers module is still under development. Watch this space!

Linking to the Latest Annotorious Build

Note: Instead of hosting the Annotorious source files yourself, you may also hot-link to the latest versions on the Annotorious site:

http://annotorious.github.com/latest/annotorious.min.js
http://annotorious.github.com/latest/annotorious.css

Clone this wiki locally