node package manager


Angular Annotorious

Angular Annotorious is directive for the image annotation library Annotorious plugin.


Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

  • Image Annotation
  • Angular directives to annotate individual images or a selection.
  • Angular service to access all the annotarious API
  • Appearance is controlled through CSS so it can be restyled.
  • BETA OpenSeadragon integration. ( web-based viewer for high-resolution zoomable images )


Via Bower:

bower install angular-annotorious

Via npm:

npm install angular-annotorious

In a browser:

<link rel="stylesheet" type="text/css" href="" media="screen" />
<script src=""></script>
<script src="angular-annotorious.js"></script>

Getting Started

Include the Annotorious plug-in and the directive on a page.

Basic with attribute

<img src="" annotorious-annotate>

Basic with dynamic src

<img ng-src="{{imgURL}}" annotorious-annotate>

Basic with tag

<img id="anno1" src="">
<annotorious options="{annotationsFor:'#anno1'}" />

Dynamic Query URLs

Do the image URLs change somehow between page load? (E.g. differences im the query string?) You can add a "data-original" attribute to the image. Annotorious will then use the value of this attribute as the identifier/src used to re-associate annotations with images.

<img  src="http://any.long.url/that-could-change.jpg?foo=randomtoken" 

Multiple with tag

<img class="group" src="">
<img class="group" src="">
<annotorious options="{annotationsFor:'.group'}" />

For more information on how to setup and customise, check the examples.


Licensed under MIT license.