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
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 InformationThis custom dialog box is one of the scripts in that website and I think it will be quite useful for all of you as well. The reason I have this custom dialog box is due to the inconsistencies across different browsers. If you look at mac’s firefox and windows’ firefox, the dialog box is completely different!
One thing about this dialog box, it uses CSS3 drop shawdow and a completely CSS3 skined button. So, latest version of chrome, firefox and safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient (i think ie8 will work).
This is how it looks like:
1. HTML
More Information