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.
[...] – ZURB.com NealGrosskopf.com l Creating Facebook Styled Photo Tagging With CSS & jQuery Jquery Photo Tag plugin | Karl's Blog FaceBook style photo tagging with jQuery | jQuery dot Net | dynamic and flexible [...]
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 can I have a way to pin a person in a picture using jQuery/PHP? Similar to Facebook’s tagging o a person….
I’m not quite sure what you are trying to do exactly: do it manually or automatically, but here is about both ways: * If you need to detect people’s faces on photo automatically, you should use some sort of face detecting algorithm. There are impleme…
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
[...] For more information on how to implement visit the jQuery Photo Tag plugin post. [...]
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.
[...] Demo Download [...]
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,
[...] For more information on how to implement visit the jQuery Photo Tag plugin post. [...]
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.
cool….thank mate
The left position is missing in the $_REQUEST to fix it go to Line 234
and change the ? for &
version 1.3
ie
$.getJSON(options.addTagUrl+’&’+$.param(tag) + ‘&’ + $(this).serialize(),function(response){
Hi Karel,
thanks for this plugin.and its completely working for me.
my only poblem is with the delete tag.
the tag gets deleted when i click the link but once i refresh the page i get those tags back.
pls help me with what ajax request you are sending to delete.php file??
are you passing any data from index.html to delete.php??
kindly help me ..
how i can use this plugin in asp.net?
for call method what i need to do?
i mean to change this:
requesTagstUrl: ‘/static/photo-tag/tests/photo_tags/photo-tags.php’
any body can help me?
[...] http://karlmendes.com/2010/07/jquery-photo-tag-plugin/ [...]
Hi,am working with the Adobe Flash Builder 4.5 I want to implement the photo tagging using flex can u plz help me how to do this?
Hi there, I have got a really big problem, I don’t know how can I update my DDBB or even introduce php on the 4 files photo-tags.php, names.php, add-tag.php and delete.php, because they seem php files but they got javascript, how could I do this?
[...] jQuery Photo tagging Plugin [...]
Where’s the documentation on available methods and options?
Very nice plugin !!!! The only think that is missing is documentation :(
Prolonged use of computers is one of the most common reasons for poor vision. Though your glasses can lessen the glare from the computer, a day of rest from the monitor still goes a long way. If daily computer use is unavoidable, then make sure you get a computer glare protector that can be attached to your screen. Wearing glasses with protective tints also helps lessen the stress on your eyes. cheap replica oakleys http://pinterest.com/oakleyscheap/cheapoakleys/
Oakley Sunglasses really are a very fashionable type of sun glasses and they are often difficult to acquire on sale. A lot of retail shops carry Cheap Oakley Sunglasses however not usually place them on sale due to the popularity. Why should a store cut down the price on the item when it’s already trading good at its actual price tag. It is bad business venture for that retail store,even if it might great for the client. Good thing for clients, they just don’t have to depend on stores to get good deals on Oakley Sun glasses. fake gucci sunglasses http://pinterest.com/fakeoakleysoaho/fake-gucci-sunglasses/
my image open in light box how this script works in lightbox