annotator-imgselect

Overview

Create annotator.js annotations that are anchored to portions of images.

Try it out in this simple image annotation demo.

Installation

Using this Annotator plugin requires ImgAreaSelect jQuery plugin CSS and Javascript and the annotator-imgselect javascript. A minified version of the combined ImgAreaSelect and annotator-imgselect code are provided for your convenience.

Include the combined CSS and Javascript files:

<link rel="stylesheet" type="text/css" href="http://emory-lits-labs.github.io/annotator-imgselect/src/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
<script type="text/javascript" src="http://emory-lits-labs.github.io/annotator-imgselect/build/0.2.3/annotator.imgselect.min.js"></script>

In your annotator application initialization, load the module and configure it with a selector for images that can be annotated.

    var app = new annotator.App();
    app.include(annotatorImageSelect, {
        element: $('.content img'),
    });

Dependencies

• jQuery 1.8+
• Annotator.js 2.x
• ImgAreaSelect jQuery plugin

Authors and Contributors

Created by Rebecca Sutton Koeser (@rlskoeser) and Kevin Glover (@kevinglover), 2015. Originally developed as part of readux.