Angular Annotorious

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

Features

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 )

Installation

Via Bower:

bower install angular-annotorious

Via npm:

npm install angular-annotorious

In a browser:

<link rel="stylesheet" type="text/css" href="http://annotorious.github.com/latest/annotorious.css" media="screen" />
<script src="http://annotorious.github.com/latest/annotorious.min.js"></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="http://annotorious.github.io/img/splash-image-1.jpg" annotorious-annotate>

Basic with dynamic src

{{imgURL=http://annotorious.github.io/img/splash-image-1.jpg}}

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

Basic with tag

<img id="anno1" src="http://annotorious.github.io/img/splash-image-1.jpg">

<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" 
      data-original="stable-identifier-for-image"
      annotorious-annotate>

Multiple with tag

<img class="group" src="http://annotorious.github.io/img/splash-image-1.jpg">
<img class="group" src="http://annotorious.github.io/img/splash-image-1.jpg">

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

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

License

Licensed under MIT license.