JavaScript API

JavaScript API (Work in Progress!)

Annotorious provides a JavaScript API you can use to get, add or remove annotations, and hook into the Annotorious event lifecycle. All functionality is exposed via the global anno object. The anno object has the following methods

• anno.getAnnotations(opt_image_src)
• anno.addAnnotation(annotation)
• anno.removeAnnotation(annotation)
• anno.addHandler(type, handler)

anno.getAnnotations(opt_image_src)

Returns the current annotations. opt_image_src is optional. If omitted, the method call will return all annotations, on all annotatable elements on the page. If set to a specific image URL, only the annotations on that image will be returned.

anno.addAnnotation(annotation)

Adds an annotation. Create your annotation as an object literal, according to the following example:

var myAnnotation = {
  /** The URL of the image where the annotation should go **/
  src : 'http://www.example.com/myimage.jpg',
 
  /** The annotation text **/
  text : 'My annotation',
 
  /** The annotation shape **/
  shape : {
    /** The shape type **/
    type : 'Rectangle',
   
    /** The shape geometry **/
    geometry : { x : 10, y: 10, width : 40, height: 60 }
 }

});

anno.removeAnnotation(annotation)

Removes an annotation from the page.

anno.addHandler(type, handler)

Adds an event handler function. Code example:

// Logs newly-created annotations to the console
anno.addHandler('onAnnotationCreated', function(annotation) {
  console.log(annotation.text);
});

Annotorious issues the following events:

• onMouseOverMedia(event)
• onMouseOutOfMedia(event)
• onMouseOverAnnotation(annotation)
• onMouseOutOfAnnotation(annotation)
• onSelectionStarted(event)
• onSelectionCanceled(event)
• onSelectionCompleted(event)
• onSelectionChanged(event)
• beforePopupHide(event)
• onAnnotationRemoved(annotation)
• onAnnotationCreated(annotation)