Here comes another goodness of jQuery. We will review a quick tutorial to create a display box of image that will have an animated comment whenever you hover it.

In the HTML code section, set a wrap div id inside the container. The wrap renders two classes which are image class and span class called: “comment”.
The image class and the comment class should have absolute position so the comment stucks on the image. Therefore, the wrap class is defined with relative position and the overflow should be set to hidden. This will hide the comment when your mouse hover-off the image.
In the end, hover jQuery event will trigger the “comment” class to animate.

Step on to the site page and the demo to find out the details. You’ll be surprise how the jQuery FX animates so smooth with very simple codes ;)

URL:
site: http://www.jcargoo.org/2009/08/overlay-text-over-image-with-very.html
demo: http://jcargoo.110mb.com/textimages/image.htm

s3Slider jQuery plugin is a smooth slide show script. It animates beautifully along with custom caption box layers. The layer appears on all sides in different direction (left, right, bottom or top).
To get start, just include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.

This plugin has been tested in major browsers (Firefox, Opera, Safari, Internet Explorer, & Google Chrome).
Should be great to feature some graphics on your website with this cool sliding jQuery effect. So visit the Plugin website to find out more:

site >> http://www.serie3.info/s3slider/index.php
demo >> http://www.serie3.info/s3slider/demonstration.html

Here is a simple jQuery Sliding Boxes that slides or animates with custom captions. This plugin is developed by By Sam Dunn.

First of all, you’ll need to set the CSS class (.boxgrid) that acts as a viewing window and sets the default position for images within it to the top left. In this stage u can also set the box captions as semi-transparent instead of solid colored, set the sliding direction and the size of sliding visibility area.

The next step is to add sliding animation as Sam Dunn has included pre-formatted potentials as follows:

* vertical, horizontal and diagonal sliding
* partial sliding (only show some of background)
* full caption sliding (hidden to visible)
* caption sliding (partially hidden to visible)

The last step is to work on the HTML for the.captionfull animation. Read the complete article and download the attached files from the source page to get you start with.

URL: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

Masonry is a layout plugin for the ever-popular Javascript library jQuery. Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Invoking Masonry only requires one line of code. So it is really easy ;-)

There are no setting or options within in the plugin. Instead, all spacing properties can be set with CSS. The only property required for Masonry to work is for the width of the child elements. Child elements should have equal width in order to avoid any overlapping.

URL: http://desandro.com/resources/jquery-masonry

SerialScroll jQuery plugin makes possible series of elements to be animated in sequence scrolling. A compact and tiny plugin, but highly customizable as it has access to a lot of options. It can use jQuery.ScrollTo’s settings and it will make 27 different options. jQuery.SerialScroll is adaptable because it won’t alter the HTML or styles at all.

You can make good use of jQuery.SerialScroll to create:

* screen slider
* text scroller
* slideshows
* news ticker

Find out more about more options setting details, to control the scrolling or events at the source page.

URL: http://flesler.blogspot.com/2008/02/jqueryserialscroll.html
Demo: http://demos.flesler.com/jquery/serialScroll/

Color Picker is a simple jQuery plugin to select color. It has the same interface just like select color feature in Adobe Photoshop. You can set this color preview in flat mode, which works as an element in a page, or customize it so you can have the color preview after a toogle button is clicked. The color picker will slide or animate with certain callback functions.

Check out the full features on the source page and download the Color Picker jQuery plugin if you think it is useful for you!

URL: http://www.eyecon.ro/colorpicker/

Moousture is a mouse gesture library with power and flexiblity to mould itself for you. Implemented on Mootools following the Object Oriented standards. Library is aimed to set out a future framework for mouse guesters for any browser including modern mobile devices.

It is based on three major concepts.
1. A probe, which probes the pointing device. Currently there is a Moousture.MouseProbe (P.S. It already supports iPhone).
2. A monitor, which tests the stability of probed device on given intervals and accordingly notifies Moousture events (onStable, onUnstable, onMove).
3. A Moousture recorder class that records the mouse movements and invoke the guesture object passed to it.

So if you want to create your own mouse gestures for the visitors of your website you should really check this one out.

url: http://neofreeman.freepgs.com/Moousture/

jQuery Captify is a plugin that displays simple and pretty captions that pop up on rollover. But in this tutorial article you can find a quick guide on using an actual image as a caption with jQuery Captify.

Simple markup is used for a start to attach the image as an alternative of text caption. Define an ID attribute on the image, therefore you can “captify” the image using this particular ID.
In the CSS, we take the caption image and make it the background of the caption div that slides up and using the Phark image replacement method, we slide the actual caption text out of view so that it doesn’t show up on top of the background.
Add a set of javascript, then the code will apply a caption with a targeted CSS classname to the image that corresponds to the ID. You should have a nice pop up image captions on rollover for the result.

Learn the details from the source tutorial and start to experiment a bit to have something different and eye-catching on your web page!

URL: http://masterfidgeter.com/2009/03/using-images-as-captions-with-jquery-captify/