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.
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.
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.
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.
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.
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.
11. Sweet Alert
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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).
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.
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.
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”.
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.
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.