10 Must Have jQuery Plugins

Sam Deering

Once again, I’ve gathered some jQuery plugin goodies that are really great and useful. This is for you to have a great experience of using jQuery and learn how to use them properly as well.

So here they are:


1. Sliding Panel

In this plugin, you’ll have a sliding panel that slides to reveal its content. Of course, jQuery is used to make an easing and great animation to animate the height of the panel.

Source:
http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/


2. Spoiler Revealer

This is a great jQuery plugin that hides content first then shows them later when a certain element was clicked.

Source:
http://css-tricks.com/examples/SpoilerRevealer/


3. FCBKcomplete

This replicates the famous Facebook dynamic inputs and auto-complete or pre-added values.

Source:
http://www.emposha.com/javascript/jquery/jquerymultiselect.html


4. Accessible Charts

This plugin is a proof that elements are usable to illustrate HTML table data. Put data in a table, allows it to remain accessible and for the visual stuffs chart can be shown there.

Source:
http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery


5. Text Size Slider

Control size of text in an article within a page using this plugin.


Source:
http://nettuts.com/tutorials/javascript-ajax/use-the-jquery-ui-to-control-the-size-of-your-text/


6. Slick Auto-Playing Slider

This plugin is very useful for displaying lots of content in a very small area.  It cycles through panels slowly and auto-plays different kinds of content, it also has an arrow indicator that serves as a visual indicator of which panel you’re currently on.


Source:
http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/


7. FancyBox

This is a cool plugin that automatically scales images to fit in windows even if they are large. It has nice drop-shadow effect under the item that is zoomed. It can group items that are relevant to each other and can add navigation between them.

Source:
http://fancy.klade.lv/


8. Flip

This flips page elements in four directions.

Source:
http://lab.smashup.it/flip


9. Animated Cartoon Robot

This simulates a faux 3D animated background just like retro video games.

Source:
http://css-tricks.com/jquery-robot/


10. Jcrop

This is a quick and easy way to add image cropping functions to your Website. It uses the almighty cross-platform DHTML cropping engine that resembles to desktop graphic applications.

Source:
http://deepliquid.com/content/Jcrop.html

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Birdie

    Nice stuff guys! Thanks for sharing :D