Sharing technology, ideas, insights!
Call: +91 710 466 0336         Email: hello@sanisoft.com

Blog

Img Notes v0.2 – a couple of bug fixes and some more

Img Notes has been made into a WordPress Plugin – See Details

Since the publication of the first version of Img Notes jquery plugin there was very little that needed to be done and the plugin itself has had more than 10,000 downloads, however there was one bug which I never got around to fixing and that was properly repositioning the notes on the image if the window was re-sized, that is till a couple of days ago when I needed to do exactly that – your bad code always catches up with you!!

Without much ado the new version has precisely 2 bug fixes

  1. Re-positioning of notes when the window is resized
  2. An issue with the z-index of the notes which led to some over-lapping

Demo here
Download here

One thing which has often been requested is the ability/interface to Add notes on the images (rather than just display). This was deliberately left out as I wanted to keep the implementation very simple and adding notes permanently cannot be a pure javascript solution.

However I would like to share the concept behind javascript code of the way I have implemented the add notes functionality – It relies on the excellent ImgAreaSelect plugin which allows for interactive selection of parts of an image. The impatient can just view the source of the demo file and figure out, the example file is also included in the zip file – those of you who need a bit of help with it, read on…

  • The page has a form with appropriate fields which is hidden by default
  • The window.load() apart from initializing the Img Notes binds 2 more events, the first with click on Add a note line to show the ImgAreaSelect and second to hide ImgAreaSelect when cancel is clicked
  • The call to show ImgAreaSelect can take a callback function for onSelectChange, here the function showaddnote is specified with some sensible defaults, you can read the excellent documentation on the ImgAreaSelect web page to know more about it
  • Well that is more or less *it* the form submission in my case is handled as a regular post to a CakePHP controller, you can try some more funky stuff like using AJAX for submission – let me know if you do

As the current implementation stands I see it as feature complete for my needs but suggestions for improvements, bug reports and patches most are most welcome.

If you are new to this plugin you may want to take a look at how to use it written about in this post

About the Author

Dr. Tarique Sani is a pediatrician and forensic expert by education. He is a PHP programmer of 'wrote the book' caliber and has to his credit several very popular open source as well as commercial PHP projects. He leads a team of dynamic programmers at SANIsoft who have in-depth understanding of Web scalability, development tools and usability practices with strong developmental skills in PHP, MySQL/PostgreSQL, HTML, Javascript, and Linux/Apache

78 comments

  1. Pingback: Img Notes - jQuery plugin at SANIsoft - PHP for E Biz

  2. Also please add “enable” and “disable” arguments to imgAreaSelect when you call “add a note”:

    on “cancel”:
    $(“#photo”).imgAreaSelect({ hide:true, disable:true });

    on “show”:
    $(“#photo”).imgAreaSelect({ enable:true, onSelectChange:showaddnote });

  3. Is there any reason why the showaddnote function is not encapsulated in the plugin?

    I’m thinking it could be easily encapsulated, but maybe there is a good reason why you did it this way?

  4. Hi Tarique,

    I am trying to add, update and delete notes with no postbacks (using javascript and webservices).
    In update mode works great but I can’t make it work in add and delete mode.

    Any idea about how do it?

    Thanks in advance,
    Leonardo

  5. Hi Tarique

    I can send you the code, its too long to publish here, let me know how to send it.
    I am working in an implementation in .NET using webservices to add, modifiy and delete notes.
    As I said before, when the note is modified the script works ok, the problem is when I add or delete notes (a new value is assigned to notes variable but changes are not visible until a refresh)

    Thanks,
    Leonardo

    • Don’t send the code – Upload the code somewhere where I can see it working.

      Also to make it work without refreshing you will have to remove the value form the notes JSON object remove all the notes by doing something like $(‘.note’).remove() and then call $(‘#imageID’).imgNotes() again to recreate the notes – there are more elegant ways but what I am suggesting would work as well.

  6. I added a function including the $(‘.note’).remove() and the delete command is now working without postback (there is a problem with the layer that contains the text of the note, in some cases remains visible).
    I will upload the code to rapidshare as soon as I finish (All servers here are part of a intranet with no access to Internet, production servers are in another place)

    Thanks,
    Leonardo

  7. Hi Tarique,

    very nice plugin, thanx for your work!

    But (yeah, well, there has to be a “but”, right?) it would also be very nice to have an onclick function to supplement the hover effect: so when clicking on an area, the form would reopen again, so that you actually can edit the area.

    Flickr also has a delete button on such reopened forms, which then makes the whole thing CRUD conform.

    We’re currently working on that (and also on a multiple image version with only one form). Let me know if I should send you the final code.

    Eddie

    • Martin thanks, I was planning to add some callbacks to the current code which can be used to hook in functionality that you are describing but beyond that I would like to leave it to the developer to do whatever they wish about the CRUD – Yes code is always welcome :)

  8. Hello, everyone. I come from Hong Kong, nice to meet you all.

    First, thanks for the javascript, it’s exactly what I want.

    But I have a question:
    I use another script which enable pop-up pictures function:
    http://www.cabel.name/draft1/2008/02/fancyzoom-10.html
    By using this, you can have a bigger image when you click on it,
    just like Apple website:
    http://www.apple.com/macbook/design.html

    So, the question is how I can implement the ‘Img Notes v0.2′ on the bigger (pop-up) images?

    *ThickBox, FancyZoom… whatever,
    they use this kind to implement the pop-up image effect.
    If I put, for example, ‘id=tern’ in the part, the ‘Img Notes v0.2′ of course won’t function.
    And that’s what I want to tackle with.

    Thanks in advance.

  9. Pingback: Image Annotation on Lotus Domino : Use. Able. Web.

  10. I’m trying to get this plugin workin… but there is no add note script?! so.. need some help!

    how can I get the add note working? It also doesn’t work in the demo! thanks…

  11. Thanks for this wonderful plugin!

    I have noted the bug. The dialog box to add note do not reposition correctly when you resize the browser window.

    Bye.

  12. Pingback: 18 jQuery scripts and tutorials to improve your portfolio « My Thoughts on the e-world at large.

  13. Pingback: 18个实用的jQuery脚本应用实例与教程 | Loves sunshine

  14. Pingback: 18 jQuery scripts and tutorials to improve your portfolio « Best Design Content

  15. Pingback: 18 jQuery scripts to improve portfolio « Themeflash.com

  16. hello,

    I am having a problem applying the script on my page
    http://japaneseclass.jp/piclearnup.php
    on firebug, it says
    $(“#tern”).imgNotes is not a function
    [Break on this error] $(‘#tern’).imgNotes(); //If your notes data is is not named notes pass it

    I used the same script on the modified example page, and it works fine.

    I copy and paste the same header and the same body (just some more contents) but it gives me error…

    I have no idea…

    please help me…

    the modified example can be seen here:

    http://japaneseclass.jp/example.php

    please any help…?

  17. Pingback: 3 more jQuery plugins at Tarique's Travails

  18. Nice plugin, but something that confuses me is that link to the 0.2 version gives me a javascript file with a header that says it is version 0.1. Is this just a typo, or am I missing something simple?
    Thanks.

  19. Hi Tarique. Your script is amazing. I’m new using javascript and jquery so it is a bit hard to understand all lol. Do you have some news to have it work with multiple photos on a the same page ?

    Thanks for your answer.

    • @Chessman, Thanks you can make this work on as many images as you want on the same page as long as the images have a unique ID and the JSON passed to them is unique. As for the hard to understand part – I would say keep at it, becomes clear after a while…

  20. With multiple images on the same page, would you have to separate the scripts individually? I tried this and it didn’t work, it put the same notes on each image:

    notes = [{“x1″:”10″,”y1″:”10″,”height”:”150″,”width”:”50″,”note”:”This is a note”}, {“x1″:”25″,”y1″:”25″,”height”:”70″,”width”:”80″,”note”:”This is a new note This is another note This is a new note”}];

    $(window).load(function () {
    $(‘#tern’).imgNotes(); //If your notes data is is not named notes pass it
    });

    notes = [{“x1″:”207″,”y1″:”195″,width:”22″,”height”:”33″,”note”:”TEST”}];

    $(window).load(function () {
    $(‘#maxstar’).imgNotes(); //If your notes data is is not named notes pass it
    });

    ———————

  21. Never mind. I figured it out. Name notes function individually. Thanks.

    $(‘#tern’).imgNotes(notes1); //If your notes data is is not named notes pass it

    $(‘#maxstar’).imgNotes(notes2); //If your notes data is is not named notes pass it

  22. @ryan

    Looking at the webpage you gave just now and imageNotes does not load for me in FF or IE7. It appears to me that you have not loaded imgareaselect.js.

    BTW if you use the latest version of imgareaselect.js then imageNotes will no longer work correctly because the callback is not called at load. I’ve hacked Tariques code to make it work and when I have a chance to tidy it up I’ll post it back here.

  23. @bj

    I did not include the area select because I am not editing any of the notes, I’m just having them static. I did add it anyways however to see if it would change anything and it still isn’t working.

    I should have clarified what version of IE I was using. It is working on IE8 with compatibility mode turned off, so it is strictly using IE8 guidelines.

  24. @ryan
    ok, but if you just have “static notes” then imgNotes and especially all the jquery that goes with it seems like a massive overkill – and a cause of the problems you are having now. Couldn’t you just use CSS and HTML and get a better result?
    Dunno, maybe I’m missing the point.

  25. @bj

    Possibly, maybe you could point me in the direction of an example that has tooltip like functions that can be added to images based on x,y coordinates with just using CSS?

    I’m going to look around and see what I can find. Thanks for the help.

  26. Pingback: Zipsites Official Blog - Useful Web Resources for PHP Developers

  27. Pingback: 15 Awesome tutorials and resources for web developers « Veille Référencement, Ressources SEO

  28. Pingback: 18 jQuery scripts and tutorials to improve your portfolio | Webmaster 9

  29. Pingback: 18 jQuery scripts and tutorials to improve your portfolio | Design daily news

  30. Pingback: Top 18: jQuery para el desarrollo y diseño web @ Ciberdix 2.0 :: Blog Creativo!!

  31. Pingback: 12 tips et plugins jQuery pour améliorer vos interfaces | Web Intention

  32. hi Tarique Sani,

    I am using Jquery image annotation plugin in my extjs code. I need to save all notes posted to image in tree form. Can you provide any sample code for this.

  33. Hi Tarique! I’m here to say that imgnotes is a very nice work! But I have a question. Can I use it freely, or it’s a paid plugin? It’s open source?

    I’m very grateful in advance.

  34. Thanks for a great plugin Tarique – it was just what I needed! I had to make a few additions to it in order to achieve everything I needed – if you’re interested, drop me a line and I’ll mail it over.

  35. I dont get cakephp. How do i get/save the values? i have tried posting it to a secund page and in that i have someting like if (isset($_POST[‘form’])) { $value1 = mysql_real_escape_string(trim($_POST[‘value1′]));} but i dont get any values. The script is awesome but if i cant store the values for the separate images its useless.

    • Just connect the form action to a real PHP page and let your page with image reload…. and may be you need to spend some time with basic PHP on how to save and retrieve values

      • My bad. I know php quite well but i got blind after sitting with php and javascript for about 12 hours. :P took a little break and when i came back i realized the problem was the names of the input.

        Thank you for replying so fast and for this awesome script.

  36. I am trying to use this.. but when I am submitting it is going a page which is not found. can you tell me what is happening?

  37. Pingback: 15 jQuery Plugins That Will Rock Your Website | [Re]Encoded.com

    • The action of this form should point to some script which saves the data for your notes. Since every site will have a unique structure the data saving cannot be a generic script.

  38. Hi, Like the script it’s rather cool. Just have one question. Is there a way to display the tags under the image and have the box display in the image when you hover over the text at the bottom?

  39. We have an issue that causes the boxes to drop down lower then they were saved when you refresh. It only happens on some computers but we a baffled by it. Have any ideas why that would be. We save the XY in our database, but sometimes the notes fall down. We are using the newest build

    Thanks,
    Mike

  40. Wasnt it, seems like a connection problem…seems to reload and be fine. Any ideas why it would be off the first time you run it?

  41. Pingback: JavaScript and jQuery: The workflow | Web

  42. 1 Thx. This add to imgareaselect is really great!
    2 How can I have form separated from the marker? I’ like to have below the picture and bigger with more fields.

  43. Pingback: 15 Awesome tutorials and resources for web developersWeb Host Colorado | Web Host Colorado

  44. Pingback: Facebook photo tagging | strofoland

Leave a Reply