Introduction
Greeting, I haven’t posted jQuery tutorial for quite a while now because I have been busy sketching and working on the redesign of Queness and other projects. Yep, something exciting is coming soon 
Anyway, in this tutorial, we will learn how to create a thumbnail image tooltip with jQuery. It displays a tooltip image when user hover on the thumbnail with fadein and out effect. It’s quite a useful script for your website. The following is a screenshot of the script, make sure you look at the demo to see the whole idea.
1. HTML
I have been thinking of using UL list, but then I think it’s not really appropriate because it would be quite difficult to style. Therefore, we will be using a DIV instead. The following image depicts the structure of the html
The structure is pretty simple, a DIV.thumbnail-item has two children – the thumbnail image and the tooltip.
More InformationYoxView is a highly-customizable jQuery image viewer plugin (Lightbox) for displaying single-to-multiple images.
It helps browsing a list of images in a modal box with previous-next buttonsor as a slideshow.
The viewer supports displaying multiple instances in a page where each of them can be configured independently.
YoxView is multilingual & already comes with multiple language files.
Besides standard navigation, images can be navigated with keyboard too.
The plugin has many options like opacity levels, background colors, title display/fade durations & more.
Ivan Lazarevic is sharing 2 different plugins for creating bar charts with jQuery & MooTools:
jqBarGraph has support for animated loading of the charts however mooBarGraph offers more features like:
url bars
info boxes (interactive charts)
negative values
AJAX data loading
Pretty CSS3 Buttons
The Objective of this tutorial is to create a set of button styles that are cross browser compliant, can degrade gracefully for non CSS3 compliant browsers and are are entirely scaleable, meaning that you can make it a variety of sizes and colours with ease.
This tutorial lends its self heavily from the Super Awesome Buttons tutorial from Zurb, with some insightful and useful alterations and additions.
CSS3 Button That Degrades Nicely
There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript.
As it stands a lot of the modern browsers support the CSS we would like to use to create a nice looking button. Firefox, Safari and Opera all have support for rounder corners, box shadows and text shadows.
What used to take six steps and lots of extra mark-up, images and css, now only takes three steps and some simple CSS3.
Dynamic Buttons With CSS3
The example in this tutorial demonstrate how to create nice looking, dynamic buttons that are fully scaleable using the CSS3 properties border-radius, box-shadow and RGBa.
By using RGBa color values, the button and text shadows will always blend well with any color you choose for your button, no matter if you want the button to be green, red or blue – The code will always remain the same.
Polaroid photo viewer with CSS3 and jQuery | demo
By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).
Sweet AJAX Tabs With jQuery 1.4 & CSS3 | demo
Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.
jSlickmenu: A jQuery plugin for slick CSS3 menus | demo
The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.
More Information