Learning jQuery

A jQuery plugin is basically a new method which is used in order to extend the jQuery’s prototype object. When extending the prototype objectall of the jQuery objects are enabled and are able to inherit any methods which are added.

jQuery community continually creates myriad of unbelievable scripts and plugins for the web. However, it tends to become a rather difficult endeavor by which to sift through everything that is being released by which to discover the scripts that are absolute must-haves for your development tasks. This is why, in this post, we have compiled a collection of 40 Must Have jQuery plugins for developers, that will help make your website more user-friendly and let you to create and optimize your web applications without much hassle and efforts.

Enjoy the list.

1. Wholly

Wholly is a jQuery plugin used to select the entire table row and column in response to mouseenter and mouseleave events. Wholly supports table layouts that utilize colspan and rowspan.

2. awTooltip

awTooltip is a tooltip plugin created with css and jQuery. It's possible to show tooltips right, left, top or bottom of the elements. Also you can use colorful tooltip styles.

3. Checkator

Checkator is a jQuery-based replacement for radio and checkbox elements. It supports css styling, and affects the original radio or checkbox element directly, which is used as the data container.

4. Select or Die

Select-or-Die is a jQuery plugin to style select elements. If you feel like adding a placeholder that’s displayed before anything is selected. Once a selection has been made the placeholder will be removed until the user clicks the SoD again. You can also add a prefix that’s displayed in front of the selected option.

5. Skipper

Skippr is a super simple slideshow plugin for jQuery. Simply include jquery.skippr.css inside your head tag and jquery.skippr.js just before the closing body tag. Create a target element with divs inside, one for each slide, and add a background image with css or the style attribute. Skippr targets div tags inside of the selected element with background-images applied to them.

6. Stripjs

Strip is a Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience.

7. FocusPoint

FocusPoint jQuery Plugin makes sure your image looks great in any container, by ensuring the ‘spare’ parts of your image (negative space) are cropped out before the important parts. It’s made for ‘responsive cropping’. Dynamically crop images to fill available space without cutting out the image’s subject.

8. MatchHeight.js

MatchHeight.js makes the height of all selected elements exactly equal. It’s a more robust equal heights plugin that correctly handles mixed padding, margin, border, box-sizing, rows, groups. It handles images and responsive layouts by automatically updating when needed.

9. ScrollMe

ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required.

10. jPList

jPList is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure. It supports data sources: PHP + MySQL, ASP.NET + Sql Server, PHP + SQLite. It works with JavaScript templates like Handlebars, Mustache etc. jPList supports XML + XSLT. It works in all major browsers.

11. Sweet Alert

Sweet Alert is a beautiful replacement for JavaScript Alert. SweetAlert automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. It’s even highly customizeable.

12. Animsition

Animsition is a jQuery plugin that makes it easy to add CSS animated page transitions. It offers 18 different animations, including various fades, rotations, flips, and zooms.

13. jQuery SmoothState

jquery.smoothState.js is a jQuery plugin that helps you eliminate jerky page loads by adding transitions that eliminate hard cuts and white flashes. It’s easy to implement, and can greatly improve user experience.

14. jQuery FontIconPicker

jQuery FontIconPicker is a small (3.22KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using a SELECT field, an Array or Object of icons or directly from a Fontello config.json or IcoMoon selection.json file.

15. Minicart.js

Minicart.js is a great way to improve your PayPal shopping cart integration. One simple change and your users will be able to manage their shopping cart directly from your website. Additional APIs provide you the power to customize the behavior to your needs.

16. jCorner

jCorner is a jQuery plugin that lets you create folded-style bottom-right paper corners. It uses CSS border tricks to create the effect without using any images.

17. Wordy

Wodry.js is a simple jQuery plugin for a text flipping/rotating written in CoffeeScript. It was inspired by the Adjector.js. Wodry.js does the same things but it has new features that allow you to set animation from animations collection, set your own callback on content flipping, etc.

18. jQuery Shuffles Images

Shuffle Images let you display and shuffle multiple images by moving cursor around or several other ways to trigger.This plugin is perfect for when you want to save space while allowing users to take a peak at what other images are related to the one displayed. It can also be used to create an interactive animation on multiple static images at once.

19. jNottery

jNottery is a jQuery plugin that lets you add notes and markers to webpages. All the data is encoded as a part of an URL which makes it easy to share or save.

20. Odyssey.js

Odyssey.js is an open-source tool that allows you to combine maps, narratives, and other multimedia into a beautiful story. Creating new stories is simple, requiring nothing more than a modern web-browser and an idea. You enhance the narrative and multimedia of your stories using Actions that will let you tell your story in an exciting new way.

21. Progressbar.js

ProgressBar.js is a beautiful and responsive progress bars with animated SVG paths. With ProgressBar.js, it’s easy to create arbitrary shaped progress bars. This library provides a few built-in shapes like Line, Circle and Square but you can also create your own progress bars with Illustrator or any vector graphic editor.

22. Particleground

Particleground is a jQuery plugin for snazzy background particle systems. Particleground includes an optional parallax effect controlled by the mouse on desktop devices and gyroscope on mobile devices. It works in any browser that supports HTML5 canvas.

23. Dense

Dense is a jQuery plugin that offers an easy way to serve device pixel ratio aware images, bringing in retina support to your website. Clear the blurry, images be crisp. The responsive, retina-ready image is implemented by simply including the jQuery plugin on the page and calling its $.fn.dense() initializer method.

24. Pattern Lock

Pattern Lock is a lightweight plugin to simulate android like pattern lock mechanism for your hybrid app or for a website. It’s easy to configure and style so you can have different type of pattern lock according to your need. Is also provide some methods to use this plugin securely.

25. Prezento

Prezento is a jQuery plugin that you can show your web designs in a new, interactive way. Show your visitors that you’ve created a responsive design, choose the device the design should be showcased on and you’re set.

26. Midnight.js

Midnight.js is a jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it. Midnight.js lets you switch fixed headers on the fly. On iOS less than 7 and older Android devices scrollTop isn’t updated fluently, which creates a choppy effect.

27. SlabText

slabText is a jQuery plugin for producing big, bold & responsive headlines.
slabText splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

28. OneBook3d

OneBook3D is a jQuery plugin that you can easily create an eye-catching presentation of your books, magazines or portfolio. Flexible, adaptive and customizable design. Auto resizing images. Full screen mode. Ideal for photo-albums.

29. jQuery.fblogin

jQuery.fblogin simplifies logging in with Facebook by jQuery. You will need a valid Facebook App Id and the Facebook JS SDK loaded to use the plugin. If you have used the jQuery.ajax() method before then using fblogin should seem familiar. Simply call $.fblogin(options) where options is an object with the desired settings.

30. Fixed Responsive Nav

Fixed Responsive Nav is a responsive, fixed and touch friendly one page navigation, using Responsive Nav, smooth animated scrolling & vanilla JavaScript. This project is built using progressive enhancement and tested to be working on Internet Explorer 6 and up. You can add a mask over the content when navigation is opened.

31. Phono

Phono by Tropo is a simple jQuery plugin and JavaScript library that turns any web browser into a phone; capable of making phone calls and sending instant messages. You can even connect to SIP clients; all with a simple unified API. Phono also acts as an XMPP client capable of sending and receiving IM messages to and from any XMPP/Google Talk user.

32. Scroll Magic

ScrollMagic is a jQuery plugin for magical scroll interactions, ScrollMagic lets you use the scroll-bar like a progress bar. It’s the plugin for you, if you want to start an animation at a specific scroll position, synchronize an animation to the scrollbar movement, pin an element at a specific scroll position (sticky elements).

33. FlickerPlate

Flickerplate is a cool jQuery plugin that lets you flick through content. This plugin is by definition a jQuery plugin and so is required. It also requires Modernizr for touch detection and the jQuery.Finger library for touch events. Both jQuery and a custom build of Modernizr are supplied. Flickerplate is configurable through a variety of ways.

34. MixitUp

MixItUp is a jQuery plugin providing animated filtering and sorting. It is great for managing any categorized or ordered content like portfolios, galleries and blogs, but can also function as a powerful tool for engaging application UI and data-visualization.

35. jQuery Tag This

jQuery Tag-This is a simple yet powerful jQuery plugin that lest you create tags from text. It allow a user to type input into a text field, which Tag-This will turn into a tag for them, or use the API to programmatically create & remove tags, if you choose this option, you can pass your own ‘id’ and ‘text’ values to create the tag with.

36. 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. It works in IE 10+, chrome, and firefox. It uses FormData so there is no IE9 and prev versions support at the moment.

37. jQuery Panorma Viewer

jQuery Panorama Viewer helps you embed Panorama Pictures on your website. You can now display your panorama photos on your site with this plugin. To do this, first you have to include the latest jQuery library together with jquery.panorama_viewer.js and panorama_viewer.css into your document’s (), and then add your image to your HTML with class name “panorama”.

38. BttrLazyLoading

BttrLazyLoading is a Jquery plugin that allows your web application to only load images within the viewport. It also allows you to have different version of an image for 4 different screen sizes. BttrLazyLoading allows your Web application to defer image loading until images are scrolled to. That way the page loading time decreases considerably.

39. Bigfoot

Footnotes on the web are annoying. You click on a tiny number, get transported somewhere near the bottom of the page, find the footnote you were looking for, and click on a link to go back to where you were on the page. Bigfoot looks to make that whole process painless. It automatically detects the footnote link and content, turns the link into an easy-to-click button, and puts up a popover when the reader clicks on the footnote button.

40. Free Wall

Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layout, images layout, nested grid, fluid grid, metro style layout, pinterest like layout with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.