Annotorious Demo Page

This is a simple demo page for Annotorious. Hover the mouse over the image to get started. Use the source code of this example as a guide when annotation-enabling your own pages!

Demo Image

Hallstatt, Austria. By Nick Csakany, 2007. Public Domain. Source: Wikimedia Commons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius diam posuere quam molestie vestibulum. Vestibulum non volutpat elit. Integer vitae felis eget magna rutrum sagittis. Nulla facilisi. Praesent a consectetur velit. Cras eget nibh est, eu imperdiet mauris. Nulla quis justo urna. Sed eu rutrum mauris. Integer aliquet nulla sit amet ante mollis pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius diam posuere quam molestie vestibulum. Vestibulum non volutpat elit. Integer vitae felis eget magna rutrum sagittis. Nulla facilisi. Praesent a consectetur velit. Cras eget nibh est, eu imperdiet mauris. Nulla quis justo urna. Sed eu rutrum mauris. Integer aliquet nulla sit amet ante mollis pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius diam posuere quam molestie vestibulum. Vestibulum non volutpat elit. Integer vitae felis eget magna rutrum sagittis. Nulla facilisi. Praesent a consectetur velit. Cras eget nibh est, eu imperdiet mauris. Nulla quis justo urna. Sed eu rutrum mauris. Integer aliquet nulla sit amet ante mollis pellentesque.

Getting Started

To set up Annotorious on a Web page, add this code to your page head:

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

Specify which images should be annotatable. There are two ways to do this:

Option 1: the `annotatable` CSS class

Add a CSS class called annotatable. On page load, Annotorious will automatically scan your page for images with this class, and make them annotatable. I'd always recommend using this approach, unless your page loads images dynamically, after the page has loaded. Example:

<img src="example.jpg" class="annotatable" />

Option 2: Using JavaScript

Use the Annotorious JavaScript API to make images annotatable 'manually'. Example:

<script>
  function init() {
    anno.makeAnnotatable(document.getElementById('myImage'));
  }
</script>
...        
<body onload="init();">
  <img src="example.jpg" id="myImage" />
</body>

And Next?

Once you got Annotorious working, you will likely want to integrate it more deeply with your Website: control it through your own JavaScript, listen to annotation create/update/delete events, store annotations on a server, etc. Visit the Wiki to learn more about Annotorious' JavaScript API, how to use plugins, or program your own extensions.

Hot-Linking to the Latest Annotorious Build

Instead of hosting the Annotorious JS & CSS 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