PhotoNotes

A Flickr-like photo annotation script with the following features:

• Unlike fotonotes, does not alter the original JPEG in any way.
• Add, move, resize, and delete notes.
• Hover over a note to view the associated comment.
• Click a note to edit the comment.
• Tested with Firefox 3.5, Chrome 4, and IE 8.

The notes are not persisted to a database. However, there are function stubs available to enable saving and deleting notes with your database of choice.

Example

Installation and Usage

1. Download and unzip the PhotoNotes files.
2. Include the PhotoNotes JavaScript and CSS files in your site header.
3. Include the appropriate script to enable PhotoNotes for your image of choice.
4. Optionally implement the functions to persist the notes to your database.

<script type=”text/javascript”>
/* create the Photo Note Container */
var notes = new PhotoNoteContainer(document.getElementById(‘PhotoContainer’));

/* create a couple of notes, and add them to the container */
var note1 = new PhotoNote(‘Atmel ATMega168′,3,new PhotoNoteRect( 150,250,50,135));
note1.onsave = function (note) { return 1; };
note1.ondelete = function (note) { return true; };

var note2 = new PhotoNote(‘2048Hz buzzer’,3,new PhotoNoteRect(172,75,69,69));
note2.onsave = function (note) { return 1; };
note2.ondelete = function (note) { return true; };

notes.AddNote(note1);
notes.AddNote(note2);

function AddNote()
{
var newNote = new PhotoNote(‘Add note text here…’,-1,new PhotoNoteRect(10,10,50,50));
newNote.onsave = function (note) { return 1; };
newNote.ondelete = function (note) { return true; };
notes.AddNote(newNote);

newNote.Select();
}
</script>

Changelog

1.5

Initial release. Download

Acknowledgments

Thanks go to Dusty at dustyd.net for the original script. I basically took his code last updated in 2006 and made it work with the latest browsers.