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.
A PHP/MySQL implementation is provided. There is also a version with save and delete function stubs for easy adaptation to any database.
Example
Installation and Usage
- Download and extract the phphotonotes (PHP/MySQL) or photonotes (database agnostic) zip files.
- Include the PhotoNotes JavaScript and CSS files in your site header.
- Include the appropriate script to enable PhotoNotes for your image of choice.
Changelog
1.5.1
Javascript bugfixes. Disabled debugging by default.
Download: PHPhotoNotes.
1.5
Initial release.
Download: PHPhotoNotes | PhotoNotes.
Acknowledgments
Thanks go to Dusty at dustyd.net for the original script with function stubs.
I’ve implemented PhotoNotes with a database successfully. I’m wondering if it’s possible to resize the notes when the page is fluid. Because my image is fluid (the div that contains the iamge has a width:*% on it), I want the notes to be attached to the part of the image when the browser window is resized. Is this possible? I thought about placing a div around the PhotoNotes but it doesn’t help because notes divs have position and they are using px. The only way I see is to modify the js script to output %, but that’s going to be really hard. Any thoughts? Thanks in advance.
@William
Hi William,
While it is true that PhotoNotes positions its notes via pixel values, those values are relative to the containing div and not to the overall page. You will need to create a new div containing only your annotated image and the same size as it (like the div with id=”PhotoContainer” on this example page). Then the notes should be positioned correctly, even if your overall page has a fluid layout.
I’d love to see a link to your implementation if things work out. Hope this helps.
Hi, I already have a div containing my image and the annotation. When I resize my browser, the image is fluid as well (I want it this way). You are saying that the px is relative to the parent div. However, when I resize the browser, the image is fluid and resizes but the notes are the same. Any ideas? Thanks.
I’m working on a web app. I’ll let you know very soon when I’m finished.
Is there a modification to the script that would allow a button click to toggle the notes to shown or hidden?
@David E
Hi David,
PhotoNotes does not have that ability. If anything, I would change the code so that the note borders fade in when hovering over the photo (like Flickr).
Nice , but I have this html when run index.html:
“Getting data…
var note = new PhotoNote(‘Teste2′, 1, new PhotoNoteRect(57, 305, 50, 50)); note.onsave = saveNote; note.ondelete = deleteNote; ….”
I just copy files to my server. Any suggestions?
@Wladimir
The ajax.runResponse(); should be causing that output to run as javascript, not be output to your browser. Do you have a test page that I can view?
@TAkaitra http://www.consultweb.com.br/phphotonotes15/
@Wladimir
Thanks for the link. I see that the notes are loading but leaving that debug output on the screen as well as throwing a Javascript error. I released a fix. Please download it, replace your index.html and admin.html files with the new versions, and let me know how it goes.
@Takaitra
YES!!! Works fine now.
Thanks a lot.