jQuery Photo Tag plugin
18 Jul
Update: Version 1.3 now compatible with jQuery 1.7 and jQuery UI 1.8. – release post.
This is a highly configurable photo tagging plugin. It has been used in Ikluu (Social Network for travelers). It’s primely for tagging people on photos but it can also be used to create notes, but you will need to adapt the form part a little bit. The code is really clean and easy to understand, it follows the jquery plugin recommendations. Soon I will create a page with some more documentation, but for now if you take a look at the code you will definitely get it.
It has a bug on IE, the hover effect for the tags are not working well. I’m working on it….
Demo and unit testing
Update: The source code have been moved to GitHub, any help on the development would be highly appreciated.
GitHub Project Home Page – On the download section you can find some examples on how your server responses should look like.
Example:
1. Reference css and javascript files:
<link media="screen" type="text/css" href="/static/photo-tag/libraries/jquery-ui-1.8.17.custom.css" rel="stylesheet"> <link media="screen" type="text/css" href="/static/photo-tag/tests/photo_tags/styles2.css" rel="stylesheet"> <script type="text/javascript" src="/static/photo-tag/libraries/jquery.dev.1.7.1.js"></script> <script type="text/javascript" src="/static/photo-tag/libraries/jquery-ui-1.8.17.custom.min.js"></script> <script type="text/javascript" src="/static/photo-tag/js/jquery.phototag.js"></script>
2. Call the photoTag plugin on load
$(document).ready(function(){
$('.photoTag').photoTag({
requesTagstUrl: '/static/photo-tag/tests/photo_tags/photo-tags.php',
deleteTagsUrl: '/static/photo-tag/tests/photo_tags/delete.php',
addTagUrl: '/static/photo-tag/tests/photo_tags/add-tag.php',
parametersForNewTag: {
name: {
parameterKey: 'name',
isAutocomplete: true,
autocompleteUrl: '/static/photo-tag/tests/photo_tags/names.php',
label: 'Name'
}
}
});
});
3. Add the image
<img src="http://karlmendes.com/static/photo-tag/tests/photo_tags/monkeys2.jpg" class="photoTag"> data-user-id="25> data-image-id="200> data-album-id="200>
Great plugin.
But there is a problem when user wants to tag same place that has already tagged. The first tag does not show.
Thanks for the feedback. I actually thought about it, but the point is that if you are tagging a person you probably wont tag two people on the same spot no? What do you think would be the best behavior for that case?
hi,
i have downloaded the files from http://github.com/kmendes/Jquery-Photo-Tag this link, but its not working. When i do the code walk there is missing of some js libraries like qunit.js, qunit.css etc
Please help me to get that files. or any other method to use this code ?
Hi Manila, in this page (http://karlmendes.com/static/photo-tag/tests/photo_tags/) you’ll have it easier because you can get all of its dependent javascripts and CSSs.
If it doesn’t work drop me an email through the contact form with more details.
Don’t you have any demo application ???
Here you can find an example of it. And it’s working on ikluu. If you are talking about the back end the answer is no, I provided examples of what information your backend needs to return on the ajax requests. You can get that on the download section of the project on git hub.
We’re trying to develop a proprietary member/group content tagging feature for WordPress and BuddyPress (ala Facebook Photos but for full-length embedded sports games). We have money for this project. Is it something you’d be interested learning about? Shoot me a message to learn more: chrism at yoursports.com.
Chris McCoy, Founder
YourSports.com
Reminds me of this plugin, which has much more possibilities and seems to work more fluit:
http://jquery-notes.rydygel.de/
I tested it out, it has good functionality but personally I don’t like the UI, not very usable. I prefer something simpler. I chose to go with something similar to Facebook photo tag because a lot of people already know how to use it.
Hi Karl,
Great looking plugin. Definately hope to give it a go at some point.
I encountered a javascript issue when viewing the demo page in IE7.
“Expected identifier, string or number
jquery.phototag.test.js
Line: 83
Char: 4″
Oops! There is a comma on the last property of a property list… I will take it out. Thanks for the heads up.
Fixed on version 1.2a
Hi Karl,
i have the same issue as Manila. i have downloaded the all files from http://github.com/kmendes/Jquery-Photo-Tag this link and put them in my iis server 5.1. No monkey picture display and the page just display – jquery 1.3.2, jquery UI 1.7.2 (UI core …)& etc.
Any suggestion?
Hi Cheng, the package you downloaded doesn’t include an example. You have to implement it with your backend development.
Hi Karl. Amazing efford. Thank you. Just want to ask, it doesn’t seem to work on IE7 (at least this page)?
Yep, problem with a stupid comma, but now it’s fixed on version 1.2a.
How do I use this download this script?
No clear documentation.so plz make a documentation with all files.Its helps very much to newbie.Thanks
I know, I’m gonna dedicate some more time to this project, you can expect some more documentation soon.
How would I apply the script to my own personal use?
There is a comma last at line 68 (https://github.com/kmendes/Jquery-Photo-Tag/blob/master/js/jquery.phototag.js#L68) that should not be there, it’s probably the cause of some of the IE-faliures reported here. There are also some missing semicolons but i do not think they will make much trouble.
Why it silently fails (plug code is read and no errors are raised, but no painting is done on image/page) when using jquery newer than 1.3.2 (tried 1.4.2 and 1.5.1) i have not yet been able to figure out – anyone more skilled than me have an idea?
/J
Hi Joakin,
I’m working on those issues right now, I might have them fixed by next week.
It was silently failing because of the response JSON format, after jQuery 1.4 it only parses JSON’s that are perfectly formed, seems fair. But anyway, it’s fixed on version 1.2a.
I agree that seems fair. I also think i have to read up on javascript debugging a little…
Nice work in fixing (and thx for responding to my comments) so quickly :)
Hello. This very good your script I’m trying to pass some parameters to the file that adds the tag and when I pass these parameters to get it loses the value of left and not properly located the tag,
could you give me information on how to pass some parameters to keep the positions I am interested in mysql.
thanks and regards
You have a difficult installation process…
Too many dependencies and difficult file structure..
Thanks Karl! This is a great plugin! Some problem encountered with IE8 though. The names of the tags doesn’t disappear along with the boxes.
It seems an error in manageError function. In case user redeclare manageError function you call response.manageError(response); The right way – it is call options.manageError(response);
Hi Karl,
Is there anyway we prevent user from enter username ?
I mean, just allow them to select from the autocomplete only.
Other than that, user input is not allowed ?
Thank you,
Hi Karl,
Is there anyway to replace or modify the plugin to work with pages asp.net (c#) instead of php pages?
can we stop ajax request on load index page….
if there are no tags on photo why it is call for 4 times.
please reply sooooooo0n
Great plugin! Is there any way to test this locally. I can’t get anything close to work following the instructions on the webpage, and they differ slightly from the instructions.txt file (different image tag closing). Very frustrating, is it possible to just package a simple demo.html file I could run locally.