In {Articles} -14th Oct- {38 Comments}

20 jQuery Plugins for Unforgettable User Experience

In this article we’d like to present a list of over 20 Useful and New jQuery plugins you should always have ready to create more interactive, more responsive and more flexible web-solutions. Image Cross Fade Transition, Smooth Marquee, Auto-populate multiple select boxes, Feed Menus, sliders, menus, animation that should give you a useful and powerful toolbox which you can use in your future projects.

1. seekAttention

jQuery Plugins

I just came by this amazing plugin, it get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

Demo can be found here.
Download plugin here

2. prettyPhoto a jQuery lightbox clone

jQuery Plugins

PrettyPhoto is a jQuery lightbox clone, showing images in a modal window.

Download source file here

3. ThemeRoller

jQuery Plugins

A simple tool to interactively skin the existing jQuery UI widgets, and then download the newly created skin – taking a lot of pain out of designing the skin.

Demos can be found here.
Download jQuery UI here.

4. The Silky Smooth Marquee

jQuery Plugins

This demonstration shows 3 jQuerified marquees and 3 standard marquees. You can see how the untouched marquees are jumpy to animate, even in the later browsers such as Firefox 3 and Safari – let alone IE6.

Demos can be found here.
Download plugin here.

5. Auto-populate multiple select

boxes

jQuery Plugins

Allows the user to select a top level category from one select box and to automatically populate the sub-category. This plugin uses three select boxes, the first (element category) drives the next (elements) which drives the next (attributes).

Demos can be found here.
Download plugin here.

6. jQuery Feed Menus

jQuery Plugins

Allows users to click your feed icon and be presented with a list of feeds to choose from, when you have a list of two, three or more links to different feeds offered on your site.

Different demos can be found here.
Download plugin here.

7. jQuery iPod-style Drilldown Menu

jQuery Plugins

A jQuery iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.

Demo can be found here.

8. Convert a Select Box Into an Accessible jQuery UI Slider

jQuery Plugins

Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider extending it with additional accessibility and general usability enhancements.

Demo can be found here.
Download source file here

9. Setting Equal Heights with jQuery

jQuery Plugins

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. This script “equalize” the heights of boxes within the same container and create a tidy grid — with little overhead.

Demo can be found here.

10. Increase the size of click targets and get more call-to-action conversions

jQuery Plugins

Say goodbye to boring ‘Read More…’ links by turning your entire content block into a clickable target!

Download source file here

11. Using jQuery for Background Image Animations

jQuery Plugins

Snook wrote a straignforward script to produce a nice menu background image animation. The animation needs to run when the user moves their mouse over and out of the navigation. The key thing to note is that any animation is stopped before attempting to animate again. This avoids animations queuing up from repeatedly moving the mouse in and out of the element.

Demo can be found here.

12. CrossSlide

jQuery Plugins

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.)

Demo can be found here.
Download source file here

13. Fading Links Using jQuery: dwFadingLinks

jQuery Plugins

David Walsh created an interesting jQuery plugin that fades links to and from a color during the mouseover and mouseout events.

Demo can be found here.
Download source file here

14. Agile Carousel: JQuery Carousel Plugin

jQuery Plugins

Agile Carousel is a JQuery plugin that lets you create a carousel with fexible settings. With the ability to show multiple slides, ability to show intro slide, ability to Disable “First” and “Last” buttons at beginning & end of carousel.

Demo can be found here.
Download source file here

15. Image Cross Fade Transition

This is really a nice plugin lets you fade one image in to another. It’s designed to allows you to pass options to control the type of bind, delays, callbacks and tests before running the animation. It pulls the latest photos from flickr, shuffles them, and then sets your memory skills to work.

Demo can be found here.
Download plugin here.

16. Stylesheet switcher using jQuery

The stylesheet switcher allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet.

Demo can be found here.
Download source file here

17. jQuery File Tree

jQuery Plugins

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso.

Demo can be found here.
Download source file here

18. jQuery Context Menu Plugin

jQuery Plugins

jQuery Context Menu is a context menu plugin for jQuery. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.

Demo can be found here.
Download source file here

19. jScroller

jQuery Plugins

An auto-Scroller, cross-browser and W3C compatible. Support up,down,left and right and also display the content alternative, when no javascript is activated. Support dynamic Content for a ticker or something like that.

Demos can be found here.
Download source file here

20. Jcrop

jQuery Plugins

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.