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

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Birdie

    Nice stuff guys! Thanks for sharing :D

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.