Update: jQuery Photo Tagger Plugin For Flickr-Style Photo Tagging
Posted February 5, 2010 at 10:26 AM
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:
Launch code in new window » Download code as text file »
- <!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.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Print Page
Newer Post
Programmatically Uploading Images To JING At ScreenCast.com Using ColdFusion
Older Post
jQuery Photo Tagger Plugin For Flickr-Style Photo Tagging
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.
