UPDATE: 5/4/06 - I've posted the code and some more details about my implementation on my PhotoNotes project page. The code is still pretty rough, but there's a live working example for you to play with. Check it out here.
The other day I blogged about Riya, the photo sharing site where you can tag individual people, and I mentioned that I too had been thinking about doing something similar. Well, since I had this week off, I've had quite a bit of time to play around with this, and I'm just about ready to move live the first part of this: being able to add "annotations" to photos.
This idea of adding "notes" to a photo has existed in Flickr for some time. In fact, there exists an open source implementation called FotoNotes, on which the Flickr notes are based.
The FotoNotes implementation is fine, but has a number limitations.
First, much of the functionality is actually implemented on the server side. For instance, the script makes an AJAX request for a certain note, and the server generates some HTML, and sends it back to the browser. This doesn't work for me, since the implementation is in PHP, and I'm wanting to use ASP.NET.
Second, the Flickr implementation in my opinion, is a lot better looking. For instance, when editing a Note, the edit box appears at the same location as the note. Minor, but important to me.
Consequently, I set out to write my own implementation, loosely based on the FotoNotes code, but with an end goal of having it look and feel like Flickr's. Another major goal of mine was to do the entire implementation in Javascript, and stub out calls to the server where necessary. In this way, one could truly implement this script easily using any server-side language.
Below I've got a screenshot of my Photo Notes as it exists right now. Essentially all functionality is there, with only a few minor bugs. In the coming days, I will start adding a few annotations to pictures here and there, and eventually I'm planning on adding this project to my now-empty Projects page, to discuss in detail how the thing works.
