Photo Notes - a flickr notes-esque photo annotation script
Photo Notes is a JavaScript implementation of photo "annotations".
Stylistically, it's based on Flickr's "Notes" feature. Under the hood, it's loosly based
on the
FotoNotes implementation. However, for the most part, it has been
completely rewritten.
Photo Notes makes no attempt to serialize the notes in any way, as that is completely system and language dependent.
Instead, it provides JavaScript objects and methods for displaying and manipulating the notes.
The Save and Delete functions have been stubbed out, and must be implemented separately. A typical Save method,
for example, would make an AJAX call to the server, which would in turn save the note to a database.
Using the code is fairly straight forward:
/* create the Photo Note Container */
var container = document.getElementById('PhotoContainer');
var notes = new PhotoNoteContainer(container);
/* create a note */
var size = new PhotoNoteRect( 156,113,70,67);
var note = new PhotoNote('Hello World!',1, size);
/* implement the save/delete functions */
note.onsave = function (note) { return 1; };
note.ondelete = function (note) { return true; };
/* add it to the container */
notes.AddNote(note);
- Hovering over a note will display that note's title
- Clicking on a note will allow you to move/resize/delete the note, as well as change it's text.
- Click the "Add Note!" button to add a new note to the picture.
This library is licensed under the
MIT License. You can use it for whatever you'd like, as long as the copyright notices remain in place.