Update: jQuery Photo Tagger Plugin For Flickr-Style Photo Tagging
Posted February 5, 2010 at 10:26 AM by Ben Nadel
This morning, I worked on updating my jQuery Flickr-Style Photo Tagger plugin to get rid of some of the limitations with the initial release. I'm still kind of feeling my way through the plugin "best practices", so bear with me.
| | | | | |
| | | |||
| | | |
Today, I made the following changes (the latest code can be downloaded from the project page):
- Hover now works in Internet Explorer. I had to add a transparent GIF background image to the anchor tags to get this to work; hopefully, I'll find a non-linked-file way to deal with this in the future.
- I removed the use of the CTRL key. Now, to create new tags, you simple click and drag; the caveat here is that "tag creation" has to be turned on (another new feature) in order for this to work.
- When you create a new tag, you cannot start the tag over an existing tag. This was more about technical issues than anything else - it made the double-click-to-delete and the click-to-drawing easier to program along side one another.
- Tag creation can be turned on/off by default as well as set manually.
- Tag deletion can be turned on/off by default as well as set manually.
To see some of these new features, I have updated the demo code:
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Flickr-Style Photo Tagging With jQuery And ColdFusion</title>
- <style type="text/css">
-
- div.photo-column {
- float: left ;
- margin-right: 10px ;
- }
-
- div.photo-container {
- border: 1px solid #333333 ;
- margin-bottom: 13px ;
- }
-
- </style>
- <script type="text/javascript" src="./jquery-1.4.1.js"></script>
- <script type="text/javascript" src="./coldfusion.json.js"></script>
- <script type="text/javascript" src="./phototagger.jquery.js"></script>
- <script type="text/javascript">
-
- // When the DOM is ready, initialize the scripts.
- jQuery(function( $ ){
-
- // Set up the photo tagger.
- $( "div.photo-container" ).photoTagger({
-
- // The API urls.
- loadURL: "./load_tags.cfm",
- saveURL: "./save_Tag.cfm",
- deleteURL: "./delete_tag.cfm",
-
- // Default to turned on.
- // isTagCreationEnabled: false,
-
- // This will allow us to clean the response from
- // a ColdFusion server (it will convert the
- // uppercase keys to lowercase keys expected by
- // the photoTagger plugin.
- cleanAJAXResponse: cleanColdFusionJSONResponse
- });
-
-
- // Hook up the enable create links.
- $( "a.enable-create" ).click(
- function( event ){
- // Prevent relocation.
- event.preventDefault();
-
- // Get the container and enable the tag
- // creation on it.
- $( this ).prevAll( "div.photo-container" )
- .photoTagger( "enableTagCreation" )
- ;
- }
- );
-
-
- // Hook up the disabled create links.
- $( "a.disable-create" ).click(
- function( event ){
- // Prevent relocation.
- event.preventDefault();
-
- // Get the container and enable the tag
- // creation on it.
- $( this ).prevAll( "div.photo-container" )
- .photoTagger( "disableTagCreation" )
- ;
- }
- );
-
-
- // Hook up the enable delete links.
- $( "a.enable-delete" ).click(
- function( event ){
- // Prevent relocation.
- event.preventDefault();
-
- // Get the container and enable the tag
- // deletion on it.
- $( this ).prevAll( "div.photo-container" )
- .photoTagger( "enableTagDeletion" )
- ;
- }
- );
-
-
- // Hook up the disabled delete links.
- $( "a.disable-delete" ).click(
- function( event ){
- // Prevent relocation.
- event.preventDefault();
-
- // Get the container and disabled the tag
- // deletion on it.
- $( this ).prevAll( "div.photo-container" )
- .photoTagger( "disableTagDeletion" )
- ;
- }
- );
-
- });
-
- </script>
- </head>
- <body>
-
- <h1>
- Flickr-Style Photo Tagging With jQuery And ColdFusion
- </h1>
-
-
- <div class="photo-column">
-
- <div class="photo-container">
- <img
- id="photo3"
- src="./sexy3.jpg"
- width="520"
- height="347"
- alt="Sexy woman used for demo."
- />
- </div>
-
- <!-- These will toggle the tag ceation. -->
- <a href="#" class="enable-create">Enable Create</a>
- |
- <a href="#" class="disable-create">Disable Create</a>
-
- <br />
- <br />
-
- <!-- These will toggle the tag deletiong. -->
- <a href="#" class="enable-delete">Enable Delete</a>
- |
- <a href="#" class="disable-delete">Disable Delete</a>
-
- </div>
-
-
- <div class="photo-column">
-
- <div class="photo-container">
- <img
- id="photo2"
- src="./sexy2.jpg"
- width="520"
- height="347"
- alt="Sexy woman used for demo."
- />
- </div>
-
- <!-- These will toggle the tag ceation. -->
- <a href="#" class="enable-create">Enable Create</a>
- |
- <a href="#" class="disable-create">Disable Create</a>
-
- <br />
- <br />
-
- <!-- These will toggle the tag deletiong. -->
- <a href="#" class="enable-delete">Enable Delete</a>
- |
- <a href="#" class="disable-delete">Disable Delete</a>
-
- </div>
-
- </body>
- </html>
As you can see, I tried to follow a sort of jQuery-UI convention where you can use the plugin method to both apply a new plugin as well as invoke methods on an existing plugin. So, for example, if you call the plugin method with an options hash:
.photoTagger( {} );
... it applies the plugin. But, if you call it with a method name:
.photoTagger( "enableTagCreation" );
... it invokes the given method - enableTagCreation - on the photoTagger instances associated with the elements in the given collection.
If you want to try this out for yourself, look at the online demo.
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
