SANIsoft

sharing technology, ideas, insights!

• Home
• Profile
• Pricing
• Careers
• Blog
• Contact Us

1. Img Notes - jQuery plugin at SANIsoft - PHP for E Biz 1.23.09 / 2:21pm

   [...] UPDATE : A new version of this plugin has been released and can be found here [...]
2. Maxim 1.28.09 / 3:12am

   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. Tarique Sani 1.28.09 / 10:32am

   Thanks for the suggestion Maxim - have implemented that in the demo
4. peeetr 1.30.09 / 3:23am

   It would be possible to add comics bubbles instead of a square/rectangle.
   Thanks for reply
5. Tarique Sani 1.30.09 / 9:39am

   Converting the Square/Rectangle to bubbles can be achieved by changing the associated CSS
6. peeetr 1.30.09 / 5:49pm

   Please example. Thank you very much
7. Tarique Sani 1.30.09 / 6:14pm

   I am not a CSS person - but you have to change the styles of the CSS class 'note' and 'notep' to look like bubbles. Search on google and you will find
8. Daniel 2.2.09 / 9:41pm

   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?
9. Tarique Sani 2.3.09 / 9:13am

   @Daniel, I don't want to bind my users to any particular way of adding notes and neither do I want my plugin to be dependent on any other plugin - what I have illustrated above is just one way, eg: the same can be done using the cool jCrop plugin found at http://deepliquid.com/blog/archives/114

   The bottom line is KISS principle works the best
10. Daniel 2.3.09 / 9:30am

    Yeah, I realized that right after I posted... Oh well. Looks like a great plugin overall.
11. Leonardo Ramirez 2.11.09 / 10:36pm

    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
12. Tarique Sani 2.12.09 / 9:22am

    @leonardo Is there any place where I can see your code?
13. Leonardo 2.12.09 / 8:50pm

    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
14. Tarique Sani 2.13.09 / 10:13am

    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.
15. Leonardo 2.13.09 / 6:11pm

    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
16. Leonardo 2.16.09 / 6:46pm

    FYI, some variables and functions names are in Spanish
17. Martin 2.17.09 / 11:04pm

    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
18. Michael 2.19.09 / 12:29am

    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.
19. Tarique Sani 2.23.09 / 3:24pm

    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
20. Image Annotation on Lotus Domino : Use. Able. Web. 3.13.09 / 5:09am

    [...] found this very nifty script using JQuery to annotate images on the web ala Flickr and Facebook. On my end, the challenge was to [...]
21. bram 3.16.09 / 3:16pm

    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...
22. Felipe L.B. 3.31.09 / 6:03am

    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.
23. Ivan 4.29.09 / 12:52pm

    I'm looking at the form code (for submitting a new note). Is that CakePHP behind the scenes?
24. 18 jQuery scripts and tutorials to improve your portfolio « My Thoughts on the e-world at large. 4.29.09 / 4:35pm

    [...] 18. jQuery Image Notes [...]
25. Tarique Sani 4.29.09 / 5:05pm

    @Ivan, yes in this particular case it was a CakePHP script
26. 18个实用的jQuery脚本应用实例与教程 | Loves sunshine 5.6.09 / 9:37am

    [...] 18. jQuery Image Notes [...]
27. 18 jQuery scripts and tutorials to improve your portfolio « Best Design Content 5.14.09 / 2:55am

    [...] 18. jQuery Image Notes [...]
28. 18 jQuery scripts to improve portfolio « Themeflash.com 5.30.09 / 5:16pm

    [...] 18. jQuery Image Notes [...]
29. beeant 6.8.09 / 6:52pm

    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...?
30. Adam 6.28.09 / 2:11pm

    Nice work Tarique!
    My image map editor could be easily configured to produce output in your format:
    http://www.maschek.hu/imagemap/imgmap

    Cheers,
    Adam
31. 3 more jQuery plugins at Tarique's Travails 7.7.09 / 4:44pm

    [...] Last week Aditya released two jQuery [...]
32. bj 7.13.09 / 2:11am

    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.
33. Tarique Sani 7.13.09 / 11:19am

    @bj It is a typo - thanks for pointing out
34. Chessman 7.15.09 / 1:34am

    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.
35. Tarique Sani 7.15.09 / 9:40am

    @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...
36. Ryan 7.16.09 / 7:31pm

    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
    });

    ---------------------
37. Ryan 7.16.09 / 7:37pm

    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
38. Ryan 7.16.09 / 8:56pm

    Could anyone explain why IE would load imgNotes, but Firefox would not. My example page is here: http://www.bakersgas.com/spotlight.html . Thanks for any help
39. bj 7.16.09 / 9:25pm

    @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.
40. Ryan 7.16.09 / 10:35pm

    @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.
41. bj 7.16.09 / 10:42pm

    @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.
42. Ryan 7.16.09 / 10:52pm

    @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.
43. bj 7.17.09 / 11:03am

    @ryan - I'd rather not clog up this blog with stuff not directly related to imgnotes, but if it's only a "tool-tip" like functionality you need, maybe try this:
    http://csshowto.com/examples/imagemap/
44. Zipsites Official Blog - Useful Web Resources for PHP Developers 8.13.09 / 6:19am

    [...] Img Notes Img Notes is an useful jQuery plug-in to add notes over images in a Flickr-like style. It’s simple to [...]
45. 15 Awesome tutorials and resources for web developers « Veille Référencement, Ressources SEO 8.28.09 / 8:53pm

    [...] Img NotesImg Notes is an useful jQuery plug-in to add notes over images in a Flickr-like style. It’s simple to [...]
46. 18 jQuery scripts and tutorials to improve your portfolio | Webmaster 9 8.30.09 / 12:35pm

    [...] 18. jQuery Image Notes [...]
47. 18 jQuery scripts and tutorials to improve your portfolio | Design daily news 9.19.09 / 7:19pm

    [...] 18. jQuery Image Notes [...]
48. Top 18: jQuery para el desarrollo y diseño web @ Ciberdix 2.0 :: Blog Creativo!! 9.29.09 / 7:08pm

    [...] 18. jQuery Image Notes [...]
49. 12 tips et plugins jQuery pour améliorer vos interfaces | Web Intention 10.21.09 / 4:59am

    [...] Img Notes Un plugin simple qui permet d’ajouter des notes sur une image (comme le permet Flicker ou Facebook, par exemple) [...]
50. chandu 11.10.09 / 10:59am

    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.
51. Bruno Takeda 11.12.09 / 11:17pm

    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.
52. Tarique Sani 11.13.09 / 9:41am

    @Bruno - the plugin is open source
53. Rob 12.8.09 / 10:13pm

    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.

Notify me of followup comments via e-mail