The Annotator Demo
Annotator is a Javascript shim that you can insert into any page, allowing you to select and annotate text, images, or (almost) anything else.
How do I use it? We think you'll get the hang of it pretty quickly. It's running right now on this page — try it out by selecting some text and clicking on the note icon. Enter a note and press “Enter ↩”: you should see your annotation as a highlighted piece of text. Hover over the highlight with your mouse to view, edit and delete the annotation.
What happens to my annotations? The annotations on this page are being sent to AnnotateIt an online web service for storing annotations. However it's simple to set up your own store. Check out the Storage and Annotation Format wiki pages for more details.
Give me the code! Right, go get a tagged release from
this page,
load annotator.min.js and annotator.min.css into
your page, and add the following Javascript1
:
$('body').annotator()If that doesn't make any sense to you, then go see the wiki page on Getting Started for more information.
1: I'm assuming you're already using jQuery, right?
If not you'll need to load that too. Best use Google's CDN with a URL like
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js.