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.
Great work Matthew – like this idea a lot!
@Michael Toso
Thanks Michael. I searched but didn’t find any (maintained) script that does the same thing. Hopefully people will find it useful. At least I will.
Hello
How MYSQL database can be saved?
Is sample available?
Hi,
I wanted to have the option that the notes cannot be edited. It seems that this is not working by using the available functions.
Can someone please verify this?
Thanks,
Michael
I have already fixed this on my local version. I can provide a patch if you like.
- Michael
Hi,
Can you alert me to the latest update…I am building a website for our camera club (non profit) and this photo notes would be a great asset to the users on our site…please let me know via my email what you recommend and possibly send me the script if it is freeware.
Thanks,
Jim
@jim
Hi Jim,
I have given thoughts to 1) creating a WordPress plugin to allow authors to use PhotoNotes and 2) creating a generic PHP/MySQL implementation of PhotoNotes but have not yet done so. What database does your website use?
Wonderfull work remake. I’ll custom it to my needs, then i’ll make MySQL interface to it…
@jim
Hi,
I use mySQL and that would be great if you could create the php /mysql tables…thanks a million…can you email me the scripts…greatly appreciated.
Thanks again for your time!
Jim
Hi Takaitra,
Have you given more thought to creating a PHP/MySQL script to go with your code above?
If so, it would be greatly appreciated. I am working on a non-profit club site that you photonotes would work ideally if it had a PHP/MySQL save script to go with it.
Hoping you will have the time and patience to do this.
Thanks so much for taking and updating DustyD’s code and making it current.
Wayne
@Wayne F
Hi Wayne,
It seems like a PHP/MySQL note persistence is a frequent request so I’ll make it my next project. Expect to see something in the coming weeks.
Many Thanks, Look forward to seeing your implementation.
@Mike Mike, How about posting your fix…
Hi…
Yeah..if you can post your fix Mike, that would be great…also if anyone has the script for the mqSQL tables for save…that would be great also..I am new to php..and would like to see the tags saved to the db.
Any help would be greatly appreciated..
Thanks,
Jim
PHP/MySQL implementation added. Enjoy.
Hi,
I will wait for your updates db tables…that will be wonderful.
My server says that they have php 5.0 and that is what I have selected when I setup this DB.
Thanks again for all of your help and this software…
Jim
@JIm
I made the update and phphotonotes now includes a file called create_table.sql. Your hosting provider probably does not have the mysqli extension enabled for PHP. Take a look at http://www.phpbuilder.com/board/showthread.php?t=10329930. Hope this helps.
Matthew,
Thanks a million…I will check out this website…
I will see what I can do on my server to have it all work…
I appreciate all of your help!
Jim
Matthew,
You do an amazing amount of quality work in a short period of time. Your PHP/MySQL release works great and is a very welcomed addition to your photonotes code library.
Many thanks for your commitment to innovative, quality coding
Wayne
Hi,
there is small problem with this code is that if you have notes on top of each other, the bellow one doesn’t show the text.
Would you please fix the overlay problem. For example, I have a small note first, then I have a big note that cover bigger area on top of the small note, now when I hover the mouse, only the big one show text , all the smaller one bellow the big one is not working any more.
Thank you.
@Jack
Hi Jack, the notes are dynamically generated div’s which have an ordering on the page. As a workaround, you could shrink your large note and enlarge your small note, thereby making the top note the smaller of the two.
What I could do as a fix in the code is make the last-used note always the top layer. However, creating a WordPress plugin out of this script is a higher priority for me for now.
@Takaira: Please email me (My email is in my profile). I have a proposal for your fix. Thanks
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.
Thanks,
Jim
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?