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

Getting Started: Standalone Version

Jump to bottom
rsimon edited this page Nov 27, 2012 · 13 revisions

Getting Started - Standalone Version

Release packages for the latest versions of Annotorious are available in the Downloads Section. Be sure to pick a ZIP archive that has standalone in the name.

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 (and safest way). I'd recommend this approach, unless your pages include dynamically loaded images or heavy JavaScripting.

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>
      anno.makeAnnotatable(document.getElementById('myImage'));
    </script>
  </head>      
  <body>
    <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