Getting Started with Annotorious

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:

  function init() {
<body onload="init();">
  <img src="example.jpg" id="myImage" />

A Note to jQuery Users

Some versions of Annotorious conflict with jQuery. When using Annotorious and jQuery on the same page, you should put jQuery into no-conflict mode, and either assign a new variable name to jQuery's $ alias or, alternatively, wrap your jQuery code into a function where you can use the $ alias in the local scope, like so:


jQuery(document).ready(function($) {
    // You can use the locally-scoped $ in here as an alias to jQuery.

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: