JQuery Plugins

Thu 2009/12/17 12:15 JST
 240
114831 views
 in 
 
Img ID#84870 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

We've been using jQuery for all the javascript bits n pieces on the site for a while now. Used to use script.aculo.us but the base files were too big and there we not as many people developing plugins for it.

Yesterday, we rolled out Image Annotations that enables you to leave notes on images which helps increases user interaction and makes communication in each article much more fun.

We are using this plugin which you should be able to install easily. We took a step further and ripped apart its guts to integrate it with our commenting system. In the future you will be able to comment with your Twitter account. For now the only integration with Twitter that we have is the twitter.com/dccom_comments account - all comments from this site are automatically sent to that account which not only makes it easy to keep track of comments, a load of keywords also will be indexed in Twitter's search results and link back to DC.

The Image Annotation system on DC is in beta mode and there are a few outstanding non-showstopper bugs which I will cover in a mo.

Img ID#84871 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

If you have a gander at yesterdays Toradora article, you will see that many folks have already worked out how to use the annotations.

The annotations will only work when the whole page is loaded so if you are on a slow connection then go and get a cuppa tea while you wait for the page to load. Articles like the A Week in Tokyo series can bloat up to be about 18MB per page - loads fast on this end but how about for you? Are you having probs with the increased amount of photos?

Once the page has loaded, you need to hover over a photo to load the annotations. Once they are loaded, you can hover over the areas to see the notes and who left them.
If you click on an area (not the note itself) then you will jump to the comments section so that you can reply to that note. Replies don't appear as notes on an image.

Img ID#84872 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

When you click on an annotation, you will jump down to the comments section and notice a thumbnail of that image in the comment. You can reply to that comment and then click on the thumbnail of the image to jump back up to the photo in the post.

This not only makes it easier to comment on each photo, but for the person reading, one can click on the thumbnail in the comment to see what the user was talking about - then click on their annotation in the photo and jump back down to the comments. Sounds complicated in this explanation but just give it a whirl!

Img ID#84886 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

If you do not want to see annotations then simply don't hover over the photo - move the mouse elsewhere! <- Not sure if the complainers realize how not to hover over photos ^^;

Img ID#84873 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

To add a note, you need to hover over the image first before the "Add note" link appears in the top right corner of the image - click it.

Img ID#84874 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

Once you click, you will see the annotation floater. You can drag the floater to wherever you want and resize it.
You can then add a bunch of text and hit save. Once you do that, you will see your annotation on the image.
The controls are a bit iffy and its something we need to fix but that wont be until January.

Img ID#84875 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

When you first add a note, you will only see the note and clicking it does not do anything. This is something we will fix.

Img ID#84876 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

But visitors who visit the page after you left a note will be able to see that you are the author - you can also see it if you refresh the page (without the #anchor on the end of the URL).
We will change this so that your avatar shows too on a cool dark transparent mac-type bubble.

Img ID#84877 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

Clicking on that "oppai doko" annotation will bring you down to the comments section where you can read the rest of the comment if it was truncated and then jump back up to the photo.

I will push this out to figure.fm soon but benowist that this is a beta version. Lemme know what improvements you would like to see. The known to-be-fixed bugs are:-

-Floater difficult to drag and resize at times.
-Floater looks like poo.
-Cant edit or delete annotations (but moderators can)
-Annotations look like poo. Will redesign and show your avatar.
-Probably need function to turn on/off annotations for all photos?
That's all the known bugs we have been able to catch so far. Remember that if you don't like them then just don't hover over the photos - i.e move your mouse elsewhere!

Also, I'm only turning on annotations for posts from now on - they wont work on previous posts but will in the future.
Anybody registered user can add annotations.

Thanks to Chris who put this together in just over a day!

Img ID#84878 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins

Leaving you with some photos for you to test with. One of the next features will be Growl notifications to let you know in real time tweets, puchi blurbs and when your comrades have logged in etc while you browse DC.

if you are viewing the RSS feed then you may want to come along to see the feature in action.

Img ID#84879 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins
Img ID#84880 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins
Img ID#84881 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins
Img ID#84885 | Flickr | New tab | Share this image | Mouseover = load notes.
JQuery Plugins
Tokyo Cam (114)
Tue 2009/12/22 11:30 JST (148193 views)
Manga illustrator and character designer for Mirai-chan Azami Yuko done a broadcast the other day of her working on a new illustration over at her Ustream Channel. I watched a... (more)
Christmas Giveaway Treasure Hunt (488)
Fri 2009/12/18 13:02 JST (119705 views)
Tis the season to not only be jolly but to also giveaway more goodies! And today we have quite a bit for dannychoo.com readers ^o^ (more)
Toradora (181)
Wed 2009/12/16 23:55 JST (113159 views)
Stole this most sweetsome figure of Taiga Aisaka from the Kotobukiya store when I had my Otacool signing at their flagship store in October. So that they wouldn't suspect me,... (more)
Flip Hole Black (299)
Tue 2009/12/15 16:10 JST (307364 views)
Once again I have been the target of Kanojo Toys to review products of the future. Today's giveaway is the Flip Hole Black which is sometimes called "DNA Particle Containment... (more)

If you are interested in reading about life in Japan, seeing photos taken daily around Tokyo, like Japanese Pop Culture (anime, manga, figures, Dollfies) then you may want to start delving into the Japan or Japanese Pop Culture category for a start or have a gander at all photo articles.

If you don't have much time now, maybe subscribe to the RSS Feed, Twitter Feed or join the other readers in the FaceBook Page.
Alternatively, you may want to read more about the site.

Former Website Manager for Amazon and Product Manager at Microsoft, Danny Choo has been bringing Japanese pop culture to the world through web, TV and conferences worldwide and has been featured on TV networks such as CNN, BBC, NHK, G4TV and LCI. See all media coverage in Danny's profile.

If you are a regular reader then this message will probably annoy you each time - hide it forever.

This item was posted in the Japanese Pop Culture category. You can see more of everything else or subscribe via RSS instead.
 日本語
-Japan Probe - News from Japan (Subscribe)
-Akihabara News – Gadgetry from Japan (Subscribe)

Minimize

About MascotsSubscribe by EmailTwitter Facebook

Tweet this!
Follow comments on Twitter
Latest Posts