Update: jQuery Photo Tagger Plugin For Flickr-Style Photo Tagging

Posted February 5, 2010 at 10:26 AM by Ben Nadel

Tags: ColdFusion, Javascript / DHTML

Reader Comments

Good work Ben. I have a project coming up and this might be fun to work into it.

@Robert,

Awesome - when you do, I'd love to hear what you did with it.

hi,
thats a real nice feature

im interested for testing it but
im more designer than developer and i only know php ...

Is there a way to make the same functionnality with php, and mysql ?

i need to change The API urls with the path to my php file, right ?

and what i dont know how to replace cleanAJAXResponse: cleanColdFusionJSONResponse
for an apache server...

Thanks for sharing

@Keusta,

You should be able to set this up in PHP, although you'll have to write the PHP scripts. As far as the function, cleanAJAXResponse(), you won't need it. It is only required for ColdFusion because it is not case sensitive.

Hi Ben,

Its a really cool photo tagging plugin. Since i was implementing this is php I was wondering how to store the data and retrieve it back.

Thanks for sharing this wonderful work.

@Ashish,

I don't have it in front of me, but for this demo, I was probably caching the tagging info in the Application scope (a persistent scope in ColdFusion). Ultimately, though, this is built to be server agnostic. As long as your PHP code can return the JSON, it should be good.

Hi, Ben,

I tried to port your design into PHP implementation. It works in my free hosting server.

However, I found my modification has issues in IE and Opera, while yours are fully compatible with most browsers. My Dragonfly is disabled due to some security issues. While Opera error console through out an CSS warning for jQuery zoom:1.

Opera will alert me for "problem in API", just as it can not decode the JSON correctly.

The error console from IE8 told me following:

Message: 'length' is null or not an object
Line: 29
Char: 312
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js

I have no ideas for all of these. I have tried the jquery-1.4.1.js from your site. The error is same.

So I return to check what is happening in JSON communications between jQuery and backend. I have tried to change the MIME to "application/x-json". It doesn't help. It is interesting that your demo's JSON XHR content-body is hidden from the Firebug tools. I don't know why.

If you happen to see the comment. Would you give me some hints to debug?

My testing implementation is written in PHP functions. The load_tags will read a CSV and encode into JSON. The save_tag will write parameters into CSV file. I wonder if there is anything I should take care of.

My demo locates at:

http://allankliu.66ghz.com/prototype/labs/jquery-photo-tagger/

My source code at:

http://allankliu.66ghz.com/prototype/labs/jquery-photo-tagger/jquery-photo-tagger.zip

Any help is appreciated.

Yours sincerely

Allan K Liu

After upgrading my Safari to v5(7533.16), the alert window can not be entered for message. Maybe it is browser bug?

Hello, I am coming back. I found that my problem is terrible format in the JSON data with unnecessary comma and missing quote. Now, IE/FF/Opera works, although Safari 5 still works abnormally.

Sorry to bother you. Again, great work for this plug-in.

@Allankliu,

Sounds like you got it mostly working with the JSON formatting. I am not sure why it would be working abnormally in Safari. Sorry.

Hello Ben,
Thank you for sharing such a nice feature.
I have a small problem and i need ure help.
I have a servlet (java) which populates an image and i wish to tag that image, and when i tag the image i wish to store it in the database. i need ure help in understanding the JASON part. Is there a way to solve my problem.

Hello Ben,
first, thanks for your nice work.
Before I port your code in PHP, I wanna ask for it because someone already does this work.
Does someone have the PHP-Code from allankliu? Both of his links are dead.

Greetings from germany
Elodrin

hiya, as a user i'm looking for this functionality on the web, eg in flickr or some other image database, have you or someone done a plug-in which can be used? If so where can i find it? Maybe data could be stored/retrieved from google spreadsheets (columns: image url, x,y,w,h, tag, hyperlink).

Thanks a lot!

I'm working on trying to adapt this plugin for some grading software.
<P>
The idea that student essays would be converted from PDF to JPG and then the faculty would leave comments on the image of the document.
<P>
The section of the plugin where the text of the tag is entered is <p>
<pre>
// Now that the user has drawn the tag, let's
// prompt them for the message to be associated.

var message = prompt( "Message:", "" );

// Check to see if the message was returned (if
// the user cancelled out, then we are going to
// cancel the tag creation).

if (message){

// Create a tag based on our pending tag. We
// know everything BUT the ID at this point.
var tag = this.addTag(
"",
this.pendingTag.position().left,
this.pendingTag.position().top,
this.pendingTag.width(),
this.pendingTag.height(),
message
);

// Save this tag (to the server).
this.saveTag( tag );

}
</pre>

The "prompt" function stops script processing and waits for the tag text to be entered. While there's nothing that prevents someone from entering paragraph-long text in a prompt box, I wanted a larger box. So, I'm trying to use the "Impromptu" plugin as a replacement. <P>
<P>
<pre>
// Now that the user has drawn the tag, let's
// prompt them for the message to be associated.

var txt = 'Please enter your comment:<br /><textarea name="newComment" id="newComment" wrap="virtual" cols="45" rows="5">Your Comments</textarea>';

var message = "";
var buttonclicked = "";

$.prompt(txt,{
callback: function (e,v,m,f){
if (v != undefined){
if (v == 'Submitted')
{buttonclicked = "s";
message = f.newComment;}
else {
buttonclicked = "c";
}}
},
buttons: { Submit: 'Submitted', Cancel: 'Cancelled' }
});

function waiting() {
if (buttonclicked == "s" ) {
clearInterval(dialogdelay);

var tag = this.addTag(
"",
this.pendingTag.position().left,
this.pendingTag.position().top,
this.pendingTag.width(),
this.pendingTag.height(),
message
);
// Save this tag (to the server).
this.saveTag( tag );
}}

dialogdelay = setInterval(function(){waiting()},1000);

</pre>

<P>
The problem I'm running into is in an effort to get the script to "pause" to allow the text to be entered, I think I'm getting lost with respect to the scope of the "addTag" function. <P> I keep getting "addTag is not a function" in Firebug.
<P>I've tried various alternatives to "this.addTag", but just can't seem to be able to figure out the correct syntax.
<P>
Any help would be appreciated.

Just seen flikr now have an add note option allowing this to be done. early stages but it does the job, and URLs work.

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment