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.
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.
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.
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!
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 ^^;
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.
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.
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.
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.
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.
We will change this so that your avatar shows too on a cool dark transparent mac-type bubble.
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!
-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.
Anybody registered user can add annotations.
Thanks to Chris who put this together in just over a day!
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.
