JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want. It works on all modern browsers: IE 6+, FF 2+, Chrome 1+, Opera 9+, Safari 2+.

URL: http://www.mind-projects.it/projects/jqzoom/

If you need to add some auto-completing functionality to your project, this AutoSuggest jQuery Plugin is for you. The AutoSuggest jQuery Plugin will turn any regular text input box into a rad auto-complete box. All HTML elements are created dynamically. No need to add any extra HTML. It uses ZERO images!

The styling is done 100% with the included CSS file, so it is super easy to customize the look of everything! You can even use images if you want, just add the appropriate lines of code into the CSS file.

So if you need this auto-completing functionality, here you go:

URL: http://code.drewwilson.com/entry/autosuggest-jquery-plugin

Forms? Errors? We all know this! This script helps you with it: When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

URL: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements. Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear. In this article you will learn how to implement this on your web page and it will give you some tips on how to adjust the looks of the cycle elements and progress bar.

URL: http://www.gayadesign.com/diy/presentation-cycle-cycle-with-a-progressbar/

If you are looking for a really new and unique way to create a nice slideshow for your website, then you should take a look at Floom. On the source site you will find two way to set Floom up: One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing a element collection, where the passed element has to be the actual image collection. Sounds interesting? It is! So have a look:

Demo: http://nouincolor.com/floom/1.0/Demos
URL: http://blog.olicio.us/2009/07/25/floom/

There were times when many people use blinking GIF web-graphic for websites to get viewer’s attention. Here is another better idea to create something like that with the goodness of jQuery. It’s not to blink within every few seconds, but you’ll see smooth transition of color changing on a text or background. Sam Dunn from Build Internet wrote a tutorial to create this amazing smooth color cycles with jQuery.

For the start, the background color is adjusted to have continuous loop with a jQuery plugin called: jQuery Color Animations Plugin. It will generate a random RGB color value in specific function.
You’ll need to sort what colors to change before working on the transition timer adjustment, and combine all functions to have a ready changing-color background.

Jump into another next step is to create a div ID for the solid black PNG image. The idea is to show the smooth animation of color changes (cycles) in the background trough the negative space of this PNG image.

Yes it is nifty but the FX is very nice to see. Learn the details of how to create this smooth color cycles for text & backgrounds with jQuery from the tutorial source.

site: http://buildinternet.com/2009/09/its-a-rainbow-color-changing-text-and-backgrounds/
demo: http://buildinternet.com/live/rainbow/

Most of the time you see some carousels that uses jQuery which have a definite set of looping. It means after you’ve finished in scrolling all of the carousel’s content, the loop will back again to the first start.

Any wonder of how to create a carousel that works in opposite way? Here is a nice tutorial that will show you how easy to create infinite loop of carousel and also to set it with auto scrolling. The auto scroll will stop on mouse-over.

An event is made to trigger the next arrow in a state of being clicked then you need to set a timer to keep firing the new custom event.

site: http://jqueryfordesigners.com/automatic-infinite-carousel/
demo: http://jqueryfordesigners.com/demo/infinite-carousel-loop.html

jQuote is a plugin to create semantic blockquotes with just one line of jQuery code. It is created by Jack Franklin. This plugin avoids duplicate content when javascript is not enabled which is what would happen if you did the usual method of copying or pasting text to create quotes. jQuote provides an easy option to add secondary quote styling, a person’s name to the quote, for instance. Again, it is also customizable in CSS.

It looks simple and nifty! Download this jQuote plugin to have your own stylish blockquote by visiting the source page!

URL: http://www.jackfranklin.co.uk/jquote/

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/

URL: http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

BeautyTips is a comprehensive jQuery tooltips plugin that will allow you to dynamically draw tooltips associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways.

By default each tooltip will be positioned on the side of the target element which has the most free space. Tip appears above the element when it is hovered or clicked. The contents of tip is provided when creating the tip. BeautyTips was written to be simple to use and pretty. All of its options are documented at the bottom of the .js file and defaults can be overwritten globally for the entire page, or individually for each target element (more about this in the wrapup section).

The canvas element is supported in major modern browser, such as FireFox, Safari, and Opera. However, Internet Explorer needs a separate library called ExplorerCanvas included on the page in order to support canvas drawing functions.

You can see lots number of examples in implementation, from simple to advance:

Read the rest

page >> http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/
demo >> http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html

This tutorial will combine the power use of Photoshop and jQuery. If you are a newbie to jQuery, and want to create a sliding navigation menus that will dazzle everyone, you should read this tutorial. jQuery animates this vertical sliding menus with a tiny arrow button controller. When the button is clicked it rolls out a box full of links, when the button is clicked again it rolls back in.

You’ll just need to include javascript and css files by typing this chunk of code within the “HEAD TAGS” of your HTML before everything else.
The next step is more about styling the vertical menu elements with CSS classes, such as: the color of the background, the text, and hover styles. For better learning process, you can download this tutorial’s files for free from the source page or just visit this cool tutorial and the demo page so you can start to create your own vertical sliding jQuery menu ;)

hoverIntent is a jQuery plug-in that made to control the response the mouse movement just as the user’s intent to. It was derived from jQuery’s built-in hover. However, instead of immediately calling the onMouseOver function, you can control the call of action on mouse over and waits until the user’s mouse slows down enough before the action is executed.
This could be useful to delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent.
There are some configuration pf options, as you can control the settings of MouseOver events. You can set it’s:

* sensitivity – default sensitivity: 7
* interval – default interval: 100
* over – required function. It is the function you’d like to call onMouseOver.
* timeout – default timeout: 0
* out – required function. It is the function you’d like to call onMouseOut.

As this could be useful for your web project, you can just visit the site to understand more about this hoverIntent jQuery Plug-in or bookmark this post for future refference.

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.