Not safe for work
Click here to reveal
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
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
PrettyPhoto is a jQuery lightbox clone, showing images in a modal window.
- Download source file here
3. ThemeRoller
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
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
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
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
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
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
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
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
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
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
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
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 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 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
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
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.
- Demos can be found here.
- Download source file here
