30+ Brand New jQuery Plugins To Change the Look and Feel of Your Website

written by aext on August 4, 2010 in Roundup and Tools with 44 comments

There are many people looking for some jQuery plugins not only for inspiration but also should be useful for further needed! You could find a bunch of new plugins for jQuery out there which can be helpful for your next projects. In this round up, we will continue to take advantage of its magic. This is a round up of some really great plugins which are not referred yet and you properly missed. Together with some CSS3 features, jQuery can refresh your web site design by changing the look and feel with no more boring.

jFormVal

JFormVal is a newest jQuery Plugin for form validation. The plugin supports many ways to validate the form in just one line code. If you are working on a multi languages web site project, you definitely love it because it comes with a bundle for error messages in different languages. Easy to config and easy to use! See the code example:

<script type="text/javascript">
	jQuery('#i01').valText('City').min(1).dif('Chicago').max(20).err('#dv1');
</script>

...

<form>
<div id="dv1">
<input type="text' id="i01" name="country" />
<input type="text' id="i01" name="city" />
<input type="submit" />
</div>
</form>

Download

jQuery 2D Transformation Plugin

jQuery 2D Transform Plugin

This plugin uses CSS3 transform effects to help you apply these effects to all browsers which support CSS3. Don’t worry about Internet Explorer, this script works well on IE 5.5+. You can use this plugin as a javascript animation library for any project.

Demo | Download

jQnotice

jqnotice

A little small plugin for jQuery that allows you to show some notifications at the top of your website with just a simple line. You can use it by just call the following method:

jQnotice('Your notification');

Awesome!!!

Demo | Download

jQuery color plugin xcolor

This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. This color picker plugin passes the color value in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions. In default, this plugin use getHex() method to returns the color as Hex string. Pretty cool, huh?

Demo or Download

jQuery Validity Plugin for Form Validation

jQuery Validaty Form Validation

“jQuery.validity is an elegant and powerful jQuery plug-in” which is lightweight. The JavaScript is only 9KB, but it can set up a total control for client-side form validation.

Demo or Download

jQuery FormLabels Plugin

jQuery FormLabels Plugin

Another awesome jQuery plugin to make caption for input fields. This jQuery plugin uses the form label as a caption. However, you have to implement jQuery UI for the plugin works.

Demo | Download

QuickFlip 2

QuickFlip works as the name. It’s very easy to implement and it provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. This plugin is really an effective way to flip content panel.

Demo or Download

Unlimited Scroll using the Twitter API

Unlimited Scroll jQuery Plugin

It’s actually not a completed jQuery plugin but you can try to follow this quick tutorial to create your own plugin that can implement the unlimited scroll bar for any pagination needed. This is really a nice technique!!.

Demo | Download

Canimate

Canimate

With Canimate, you can take any series of images and, using the Canimate naming convention, have them animate at any speed. You can treat the element that holds the image just like any other, including giving it borders, dragging it, etc. Give it a try!

Demo or Download

Lumebox

Lumebox Plugin

This is an alternative lightbox script for jQuery which can parse the RSS of the post or page of your blog then displays images inside them (off course only with specific image group you defined). The script will open the image in popup just like other lightbox scripts.

Demo or Download

Pines Notify jQuery Plugin

Pines Notify jQuery Plugin

Pines Notify is a flexible jQuery notification plugin which is very easy to implement and having bunch of option for developers to display any kind of notification. The script is fully customizable since it uses the jQuery UI CSS library for styling.

Demo or Download

Crazy Dots – jQuery Plugin

Crazy dot jquery plugin

This plugin takes a few CSS3 techniques which are: rotate, border-radius, and linear-gradients to make an ajax loader like effect. The plugin works even with IE browsers(depends on jQuery 2D Transformation Plugin above). If you haven’t seen my tutorial which can do the same effect in 5 lines of jQuery, you can catch it here: Shadow Motion Effect in 5 Lines Of jQuery.

Demo | Download

jQuery Apple-like Retina Effect

Apple-like Retina Effect With jQuery

Inspired by Apple iPhone 4 promotion page but after publishing this tutorial, Apple already implemented this effect to their product feature page here. The tutorial show us how to implement a nice effect which can zoom-in the content in a magnifier. You can follow this tutorial to build a jQuery plugin for your own project.

Demo | Download

CrossSlide

If you are still want to implement a simple product slide-show with the help of Flash, you should think again. With CrossSlide jQuery plugin, in 2kB of Javascript code, it can create a few different effects, depending on how it’s called.

Demo or Download

jQuery Constant Footer

Constant Footer jQuery Plugin

This plugins will convert a static HTML footer into a fixed-position footer that is glued to the bottom of the browser window. The feature that I like much is you can parse the feed and display as a stories on the footer which is really useful for blogs, magazines…

Demo | Download

Beautiful Photo Stack Gallery with jQuery and CSS3

Beautiful Photo Stack Gallery with jQuery and CSS3

A fresh idea for a photo gallery. The idea is to show the albums as a slider, but in the stack view. We can browse through the images by putting the top most image behind all the stack with a slick animation. However, the plugin works if you use a Webkit browser like Chrome or Safari because of some Webkit properties. However, if you use it together with jQuery 2D Transformation Plugin above, you won’t worry about cross browser compatibility anymore.

Demo | Download

Blur Gallery

Blur Gallery

This is little plugin for soft image blur effect on page load (and ‘clear’ on hover/rollover). The idea is pretty cool, the way to make blur effect is duplicating the original image to many then set opacity for each copy.

Demo | Download

jQuery content feature like MailChimp

jQuery content feature like MailChimp

This tutorial will show us how to build a content feature like MailChimp. MailChimp had changed their homepage with great design and integrating a slick full page slider. The plugin is using jQuery Cycle plugin to scroll images.

Demo | Download

jQuery Radmenu Plugin

Radial Menu jQuery Plugin

This is a circular contextual menu jQuery plugin. The radmenu plugin essentially builds items around the circumference of a circle and the location of the menu items can be easily memorized by novice users, as well as experienced ones.

Demo or Download

Colortip – a jQuery Tooltip Plugin

Colortip JQuery Plugin

Yet another jQuery tooltip plugin which uses the title attributes of elements as a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design. Not much different to other plugins we knew, but it’s just fancy.

Demo | Download

jQuery Ajax Poll

jQuery Ajax Poll

In a complete tutorial, the author explains in detail how to make an ajax-based poll system with PHP, MySQL and jQuery. You can simply take the javascript part and this script can be implemented to any website quickly to interact with PHP and MySQL to create an ajax-based poll system.

Demo | Download

jTweetsAnywhere

jQuery Twitter Widget with @Anywhere support

jTweetsAnywhere is a jQuery Twitter Widget that simplifies the integration of Twitter services into your site. The scripts comes with a bunch of features; As its name, you can implement an almost complete Twitter with just few lines of Javascript.

Demo | Download

Nivo Zoom

Nivo Zoom

I was really confused about the name of this plugin the first time. It should be called lightbox effect rather than zoom effect because this the plugin allows you to display the images larger just like some other lightbox scripts. It’s just simple and effective with 5 different zoom(???) types. You can also add caption for each image displayed. It works on all modern web browsers: Internet Explorer 7+, Firefox 3+, Google Chrome 4, and Safari 4.

Demo or Download

[smartads]

Cloud Zoom

< Cloud Zoom

Now, this is a truly zoom one. Cloud Zoom plugin has smoothing effects: fade in/out zoom, soft focus zoom … especially the tint zoom feature is a good idea to help us focus on the area.

Demo or Download

AeroWindow – Plugin for jQuery

AeroWindow - Plugin for jQuery

AeroWindow generates very cool Boxes in the Aero Style, inspired by the style of Window7. The popup window offers the usual options and full functionality similar to Windows modal windows.

Demo | Download

jDesktop

jDesktop

It’s a complete framework for making desktop-like environment in a web browser with very cool effects and animations. Remember to check the “Go 3D” effects to see how awesome it is.

Demo | Download

Simple unlimited levels vertical drop down navigation menu jquery plugin

Simple unlimited levels vertical drop down navigation menu jquery plugin

Simple unlimited levels vertical drop down navigation menu jquery plugin.only css and js,no background images. – according to the author.

Demo | Download

gvChart

gvChart plugin – jQuery with Google Charts

gvChart uses Google Charts API to create interactive visualization by using data from the HTML table tag. There are five types of the charts at your choice: AreaChart, LineChart, BarChart, ColumnChart and PieChart.

Demo | Download

BubbleUp jQuery Menu Plugin

jQuery Menu BubbleUp

This is my plugin which can zoom in and zoom out your menu images (or for a social network bar like what I did in the example). Although this effect isn’t a smooth and it is not as good as Mac Dock menu, it’s enough for a nice looking menu with tooltip.

Demo or Download

ezMark: jQuery Checkbox & Radiobutton Plugin

ezMark is a tiny jQuery Plugin which can help you to stylize Radio button and Checkbox easily. The script works on all major browsers: IE 6/7/8, Firefox, Safari, Chrome.

Demo | Download

CSS3 Rounded Image With jQuery

This one is actually a small trick of jQuery which does the magic tag wrapping the image to generate a rounded border and inner shadow by wrapping a span tag around with the original image as a background-image. Nice trick!

Demo or Download

ShowLoading

ShowLoading

This plugin is designed to show a loading image over a specific area of the screen (e.g. a specific div or other dom element) while an ajax request is running. ShowLoading could come in handy on several projects.

Demo | Download

UI Elements: Search Box with Filter and Large Drop Down Menu

Search box with filter UI element

A search box with a filter has a slick looking details. This search box will reveal a drop down menu after the user clicks into the input field when implemented to the page. With the filter built-in, users can select options for searching.

A good option for sites with a lot of navigation items. It’s such a sexy mega drop down menu element you should use.

You can download them here included their demonstrations.