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.


Installation and Usage

  1. Download and extract the phphotonotes (PHP/MySQL) or photonotes (database agnostic) zip 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.



Javascript bugfixes. Disabled debugging by default.
Download: PHPhotoNotes.


Initial release.
Download: PHPhotoNotes | PhotoNotes.


Thanks go to Dusty at for the original script with function stubs.

38 thoughts on “PhotoNotes

  1. Hi,

    Sorry for my bad English (im from Germany)

    but i want to include in your great script! A Link -Function exp. like (social community)

    Where wenn i click on the marked notiz i will be linked to an internet url.


    [ ] Demonotice

    Wenn i click at the [ ] (marked area) i will be forwarded to (and i will write the url when i markup the notice)

    is this already possible?

    And sry again for my bad shool english 😉

  2. @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.

  3. 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?

  4. 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.

  5. @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.

  6. 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.

  7. There seems to be a ghosting issue when using multiple images.

    Load up the PHP admin.html and when you create a notation and save it, then add another notation on the 2nd image, you will see it also shows the created box in the first image and it moves there too!

    Is there a fix for this?

  8. Hi,
    I tried the mysqli extension as mentioned, but my server still does not run the software…not sure what to do at this point.

Leave a Reply

Your email address will not be published. Required fields are marked *