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

Blog

Img Notes – jQuery plugin

UPDATE : A new version of this plugin has been released and can be found here

This was another one of ‘want it now()’ things. A simple way to display notes over images when you roll your mouse over the image – you got it right! Flickr has that…

There are a couple of similar javascript solutions out there but I wanted something using jQuery and simple. Well using jQuery and simple in same sentence is kind of redundant but if you see the plugin code you will realize what I mean.

Take a look at the demo

Usage:

#1 The plugin expects the notes data to be in in json fomat. To quote from the example

To quickly go over the properties
x1 – The X co-ordinate of the top-left corner of the note area
y1 – The Y co-ordinate of the top-left corner of the note area
height -
width – self explanatory
note – The text of the note, it can have html but I recommend you keep it simple.

x1 and y1 are relative the position of the image on which the notes will be displayed, so when you move the image around in your page the the notes will move with it.

#2 The javascript code to initialize the notes

The zip file has an example

Download : here
Known issues: Internet Explorer has a buggy behavior while displaying the text of notes, any one having a solution please post a comment.Fixed

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

49 comments

  1. IE needs some kind of background for this hover-thing. you could add a transparent gif or png as background-image to .note.
    this should work.

    besides that, great work!

  2. Pingback: 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources | Speckyboy - Wordpress and Design

  3. Pingback: Enlaces de la semana 5 — Viciao2k3

  4. Pingback: A study in Ajax Web trends. What are the best Free Ajax Resources? (70 of the Best Ajax Resources). | Speckyboy - Wordpress and Design

  5. Pingback: Visualizzare note sulle immagini come Flickr - 3 sul Blog - Tech, Fun e Web 2.0

  6. Pingback: 点点开源项目大全 » Blog Archive » 【AjaxTooltip】Img Notes

  7. Pingback: Camondongs - Desenvolvimento Web

  8. Pingback: 70 of the Best Ajax Resources -

  9. Bugreport + Bugfix:

    when multiple notes overlap – some note is displayed behind the noteborder of another notearea:

    fix:
    jquery.imgnotes-0.1.js
    line 42
    from: $(this).css(“z-index”, 10000);
    to: $(this).next(‘.notep’).css(“z-index”, 10000);

    and
    line 47
    from:$(this).css(“z-index”, 0);
    to: $(this).next(‘.notep’).css(“z-index”, 0);

  10. Hey Tarique,

    awesome work! Thanks for sharing!

    What about an improvement, with a button that allows you to select an area and create a new note? I was looking all over the web for a jquery script like that and thats the only thing thats missing in your script!

    Greets

    Marco

  11. Hi Tarique,

    Wonderful script. There’s a small problem. I don’t know if you realize if one note is big enough to cover all the others, these smaller notes will not be accessible (when hovered you can only see the content of the big note that covers everything)

  12. Pingback: Boost My Code » CSS Javascript Tag jQuery » Tag an image with jQuery

  13. Pingback: 10 fantastiska AJAX-script du inte vill missa! | Designskolan

  14. Pingback: Img Notes v0.2 - a couple of bug fixes and some more at SANIsoft - PHP for E Biz

  15. Pingback: 70 of the Best Ajax Resources | CSS Resources

  16. Pingback: itch and the jQuery scratch « null pointers …

  17. Pingback: 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources | 77even

  18. Pingback: Image Notes | jQuery plugin | peopleofdesign.net | Современник

  19. Pingback: Amazing jquery plugins | psd2css

  20. Pingback: 天亿博客 » 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)

  21. Pingback: jQuery常用WEB控件第五弹 | CKSKY

  22. Pingback: JSSAY » 1000个JQuery极品插件(连载中…)

  23. Pingback: jQuery极品插件 | 花花世界

  24. Pingback: 20 Amazing jQuery Plugins : swapnil

  25. Pingback: 超强1000个jquery极品插件! | 对酒当歌WEB开发

  26. It’s very good.
    I like this.
    Thanks for share.
    And I wrote something to introduce this project for my readers.
    You can find the post about this in my website.
    If something is wrong,pls figure it out.thanks.

  27. Pingback: Img Notes 开源项目 - Ajax代码大全 - Java开源项目 - 图片管理 - ajax图片展示工具 - Img-Notes - Java免费软件 - 开源网

  28. Pingback: Jquery13

  29. Pingback: Image Annotation Plugins for WordPress | Jesse Pearlman Karlsberg

  30. Pingback: 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources

  31. Pingback: jquery图片展示插件(转) | 西街口

  32. Hi, first of all GREAT WORK!!!

    I would like to know something though… I downloaded this source code and am in the process of modifying to better suite my needs.

    I need show the notes that have been tagged to this image at the bottom, and when the user hovers over a given tag, i want the square of that particular tag to be appear.

    Could let me know where I should edit in order to make this possible?

    • This is a very simple plugin. Your best bet is to write a separate plugin to take the data and create necessary links, feel free to copy the code which shows and hides the notes from my plugin.

      • Hi, first of all thanks for the reply.

        I actually got the data to appear at the bottom in the form of links. Now my problem is getting the relevant square to appear on the image when I hover over link.

        What is the function that I should pass the x1 y1 width and height values in order for the square to appear?

        • Well, first you will need all the notes (which are actually divs) to have unique IDs, once that is done then the hover of the links below the picture will need to call the show and hide function with that unique ID being passed, of course then you will have to modify the show and hide to use the ID passed but that is very simple. Do release the plugin modifications once you are done :-)

  33. Pingback: knspr-imgnote review, discussions, does it work, and ratings on Loadwp.com | Loadwp.com

  34. Pingback: 100+ Excellentes Recursos jQuery | zebit | Chile

  35. hi,

    Thanks for this script, it works wonderful! but i want to fixed the size of selection box, could you please direct me that how i make this change.

    No doubt its good feature but my requirement is for fixed size.

    Thanks

  36. Pingback: 超强的jquery极品插件–色彩选择器类/ 右键菜单类/ 图片新闻flash展示类 « 得看看-精品阅读|速查|分享

  37. Pingback: 100个优秀的jquery资源

Leave a Reply