This article was published 10 years ago, therefore the contents of this post may be out of date.

jQuery has become an awesome but simple JavaScript library that could be considered as being the backbone of web development as almost every developer and designer are familiar with it’s functionality and features.

And with these jQuery Plugins can enable developers and designers to create a set enriched web applications by making them multifunctional and also visually appealing.But finding these plugin in the wonderful jQuery community can be sometimes time-consuming, this is why you will find below a small collection of 20 great & amazing jQuery plugin that suits  any type of website that you are currently building or rebuilding, most of the plugins that features in today’s post are easy and only takes a few minutes to carry out and configure.

1. Croppic

croppic

Croppic is an image cropping jquery plugin that will satisfy your needs and much more. Simply upload an image, and then you are able to crop the image as you like with the zooming in and out functionality.

The plugin works in IE 10+, chrome, and firefox and it uses FormData so for anyone that wanting IE9 and below and wanting to use this plugin, it won’t work.

2. Obelisk

obelisk

Obelisk.js is a JavaScript Engine that is for building isometric pixel objects. With the simple and flexible API that is provided by this engine, you can easily add isometric pixel element such as a brick, cube, pyramid onto HTML5 canvas.

Obelisk.js strictly follows the pixel neat pattern: lines with 1:2 pixel dot arrangement, leading to an angle of 22.6 degrees.

3. Responsive Tabs

Responsive-Tabs

The Responsive Tabs is a simple jQuery plugin that provides responsive tab functionality, as the tabs transform to an accordion when it reaches a CSS breakpoint. With this plugin you can use it as a solution for displaying tabs elegantly on desktop, tablet and mobile.

4. jQuery Sticky Alert

Sticky-Alert

Sticky Alert is a small jQuery plugin that adds a simple sticky alert bar to the top of your website.

5. Pick a Date

pickadate

Pickadate.js is a fully responsive and lightweight jQuery date input picker, this plugin looks pretty neat and simple and it is easy to use.  This plugin has been tested on IE7+, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser.  For those who are wanting to support IE7 and below will need to include the pickadate.legacy.js instead.

Pickadate.js is a fully responsive and lightweight jQuery dateinput picker. It looks pretty neat and simple. It is easy to use. And alos, you can have different themes for it as well.

It has been tested on IE7+, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser. The pickadate.js script supports all modern browsers and IE 9+. To support IE 7+ and other old browsers, include pickadate.legacy.js instead. It is released under MIT License.
Read more at http://www.webappers.com/?s=pickadate#GtGQSQZaM9iwU0LX.99

Pickadate.js is a fully responsive and lightweight jQuery dateinput picker. It looks pretty neat and simple. It is easy to use. And alos, you can have different themes for it as well.

It has been tested on IE7+, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser. The pickadate.js script supports all modern browsers and IE 9+. To support IE 7+ and other old browsers, include pickadate.legacy.js instead. It is released under MIT License.
Read more at http://www.webappers.com/?s=pickadate#GtGQSQZaM9iwU0LX.99

TaggingJS is a jQuery plugin to create an highly customizable front-end tag system. It is less than 3 kb and support major browsers in the world. It is licensed under MIT License.

There are several ways to customize the default behavior of taggingJS: 1. Use a JavaScript custom_options object to customize the global taggingJS behavior. 2. Use data attributes in the tagBox HTML Markup. 3. Use a combination of the first two way.
Read more at http://www.webappers.com/#RkUL8z4q8fHPWrWh.99

6. Sheetrock

SheetRock

Sheetrock is a jQuery plugin for querying, retrieving, and displaying data from Google Spreadsheets. You can use it to load entire sheets or leverage SQL-like queries to treat Google Spreadsheets as a quick-and-dirty JSON datastore.

All you need is the URL of a public Google Spreadsheet as it requires no back-end code whatsoever—everything is done in the browser.

7. Read After Link Accumulator

read-after

Read after is a jQuery plugin that accumulate link for those who are reading an interesting article that contains these related links that you’d like to read, but want to finish reading the current article first.

8. StickyNavBar

stickyNavbar

stickyNavbar.js is a jQuery plugin that helps you stick your navigation bars to the top of the browser window during scrolling.

It could stop right here but with stickyNavbar.js you can offer so much more as you can use your favourite jQuery effects or even use the fantastic Animate.CSS library to spice up your navigation.

9. SVGMagic

svgMagic

SVGMagic is a simple jQuery plugin that seaches for SVG images this includes background-images  on your website and creates PNG versions, for the browser that doesn’t support SVG.

10. jInvertScroll

jInvertScroll

jInvertScroll is a lightweight jQuery horizontal Parallax Plugin that allows you to move in horizontal with a parallax effect while scrolling down. This plugin is extremely easy to setup and requires nearly no configuration.

11. BttrLazyLoading

bttrlazyloading

BttrLazyLoading is a jQuery plugin that allows your web app to only load images within the viewport. This plugin will also allows you to have different version of an image for 4 different screen sizes.

12. Flip-Quote

flip-quote

The jQuery Flip-Quote plugin creates a pull-quote from a text quote found in the document that flips once it’s scrolled into view. It also has a click feature that scrolls into and highlights the quote origin on the document.

The jQuery Flip-Quote plugin optimises CSS 3D transform and other CSS3 properties to give it a 3D depth and perspective. This has been tested on all modern browsers, but for IE and older browsers the plugin has a fallback support.

13. Avgrund Modal

avgrund

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept to show depth between popup and page. Avgrund works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). The plugin tested with jQuery 1.4+, file size is under 2Kb, MIT Licensed.

14. Float Labels

floatlabels

floatlabels.js is a simple jQuery plugin for the Float Label Pattern. The Pattern is easy to explain, on User Interaction with an input field the placeholder value moves up, and is displayed above the typed text.  This Plugin offers you the possibility to upgrade your forms with this famous pattern.

15. jQuery.Checkboxes

jquery-checkradios

The jquery.checkradios is a lightweight jQuery Plugin that allows you to use CSS to style checkboxes and radios without using images, as this plugin instead uses vector based icons/fonts to add in the ticks and circles which allows far greater customisation as well as scalability and ultimately much greater control over the checkboxes and radios using css.

16. Collapser

Collapser

Collapser is a small and useful jQuery plugin for collapsing/truncating an element text by words, characters and lines with a flexible API. It is an all in one plugin with multiple functionality to truncate a paragraph or any element as desired.

17. Fluidbox

fluidbox

Fluidbox is a jQuery plugin that replicate the distraction-free, fluid lightbox that you seen on Medium, and to improve on it such that it will allow linking to a larger-resolution image.

It works on mobile and also plugin deals with higher resolution, linked images elegantly, such that it only preloads them when users click on the thumbnails.

18. Pour Over

pourover

PourOver is a library for simple, fast filtering and sorting of large collections (like 100,000s of items) in the browser. It allows you to build data-exploration apps and archives that run at 60fps, that don’t have to to wait for a database call to render query results.

19. TaggingJS

taggingJS

TaggingJS is a jQuery plugin to create an highly customisable front-end tag system. The plugin is less than 3kb and is supported on all major browsers. The plugin includes several ways to customise the default behavior of taggingJS.

20. Wanker

wanker

Wanker.js is a tiny jQuery plugin that reveals a public service announcement for those who people who start excessively resizing their desktop browser as they try to see your responsive breakpoints, this plugin is a perfect easter egg plugin for designers, photographers, writers, and anyone else with a sense of humor displaying their work on the web wishing their viewers to focus more on their work, and less on the magic of media queries.

Share

20 Great & Amazing jQuery Plugins for Any Website Builds