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
- Re-positioning of notes when the window is resized
- An issue with the z-index of the notes which led to some over-lapping
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.
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 });
Thanks for the suggestion Maxim – have implemented that in the demo
It would be possible to add comics bubbles instead of a square/rectangle.
Thanks for reply
Converting the Square/Rectangle to bubbles can be achieved by changing the associated CSS
Please example. Thank you very much
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
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?
@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
Yeah, I realized that right after I posted… Oh well. Looks like a great plugin overall.
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
@leonardo Is there any place where I can see your code?
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.
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
FYI, some variables and functions names are in Spanish
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
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.
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…
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.
I’m looking at the form code (for submitting a new note). Is that CakePHP behind the scenes?
@Ivan, yes in this particular case it was a CakePHP script
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…?
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
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.
@bj It is a typo – thanks for pointing out
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…
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
});
———————
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
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
@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.
@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.
@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.
@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.
@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/
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.
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.
@Bruno – the plugin is open source
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.
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.
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.
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?
What are you trying to submit? this script is NOT about submitting anything!
After clicking “Add a note” appear page with text “Error 404 – Page not found
Sorry! the page your are trying to visit does not exist”
Not founf page with url – http://www.sanisoft.com/nagpurbirds2/notes/add
What action must be at this button?
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.
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?
Sorry – this plugin does not have that functionality
is there a solution to show all notes on load? and so that they doesn’t disappear at mouseout.
Currently there is no such feature but it can be done with just single line of code…
$(‘.note’).show();
Hope that helps
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
Can you show me an example?
Hello can you please show me an example how the script can look like in this file:
http://www.sanisoft.com/nagpurbirds2/notes/add
Take a look at the code on the page and feel free to copy
@Tarique
Here is a link to the problem I am having. The comment boxes keep slipping. Any input would be great. It seems to happen more with a slow connection. Thanks.
SCREEN SHOT HERE
Disable all other CSS than the one for imgNotes – if it works then try to figure out what in your CSS is causing the problem
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?
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.
Just put the form where ever you want on the page instead of in a hidden div – The javascript will still work.
sweat