The Web is on a perpetual flux of becoming and expanding with each and every passing day ( if not every hour on the hour ), and along with its expansion newer advancements are made. Within these advancements, developers are continually working on creating bigger and better scripts by which to further enhance the end user experience by making plugins which are lighter and possess more capabilities than their predecessors.
The overall key factor within these newer advanced scripts and plugins is that they are now built to be Responsive without forfeiting the functional features they once possessed – but rather to be better and lighter ( as far as file size ) so that they dont end up slowing down page loading time.
JQuery’s syntax was designed in order to make it easier by which to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications- and it furthermore provides capabilities for developers to create plug-ins on top of the JavaScript library.
With jQuery’s architecture developers are able to create a plug-in code to extend its functionality, thereby being able to produce some of the best plugins by which to allow you to take your website or any given project to an entirely new level.
In this article we have amassed some of the Best jQuery Plugins which you can pick and choose from that offer a variety of features and functions which will enable you to infuse your web pages with every type of effect imaginable. We hope you will find the plugin you had been looking for in the following list below.
Let us know which of the following plugins you have used in the past or you are considering using for your upcoming project or website in the comment section below.
Enjoy The Roundup!
1. FlickerPlate
Flickerplate is a handy jQuery plugin that lets you flick through content. It also requires Modernizr for touch detection and the jQuery.Finger library for touch events. lickerplate is configurable through a variety of ways. You can either setup the options through the Javascript call or you can set the options via data attributes on the actual element.
2. Tagging JS
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.
3. 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).
32. jPages : JavaScript Powered Pagination
jPages is a client-side pagination script (a jQuery plugin) with features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel. Any number of pagination elements can be inserted into the same page and they can be positioned with ease.
5. PNotify
PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. It can provide non-blocking notices. This allows the user to click elements behind the notice without even having to dismiss it. PNotify uses either Bootstrap or jQuery UI for styling, which means it is fully and easily themeable.
6. Wholly
Wholly is a jQuery plugin for triggering table column mouseenter and mouseleave events. Wholly is used for highlighting the entire table column. Wholly supports tables with colspan and rowspan attributes. If you want to support colspan and rowspan, then first you need to build table cell index. Then you need to track events of all the table cells of interest and calculate their offset in the matrix and the columns that share the vertical index. Wholly is not limited to setting a particular style.
7. 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.
8. Velocity.js
Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow.
9. rowGrid
rowGrid.js is a small, lightweight (~700 bytes gzipped) jQuery plugin for placing images (or other items) in straight rows. The grid similar to grids on Google Image Search, flickr, shutterstock and Google+ images. rowGrid.js is responsive and allows users to infinite scroll. All items must have the same height but the width can be variable.
10. 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.
11. ImageLightbox.js
ImageLightbox.js is an incredibly simple, responsive, touch-friendly lightbox script. It’s extensible and configurable, minimalistic (and only 4kb if minified), and uses CSS transform and transition for moving images.
12. jQuery Tip Cards
Tip Cards plugin let you create a layout of cards with a card-like interaction that you see on Google Tips Page. There are several new animation options so that you can personalize it to your own liking. You can use callbacks to perform actions before or after the modal opens. Modern browsers such as Chrome, Firefox, and Safari on desktop have been tested.
13. Floatlable.js
The Float Label Pattern found his success after Brad Frost wrote a blog post about Float Label Patterns. The idea is based on a Dribbble Shot by Matt D Smith. 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.
14. Nanogallery
nanoGallery is very easy to implement image gallery plugin for jQuery. It is touch enabled, responsive, fast and it supports cloud storage. Featuring multi-level navigation in albums, lightbox, many hover effects on thumbnails, slideshow, fullscreen, pagination, image lazy load, themes, bootstrap compatibility, customizable, and pulling in Flickr/Picasa/Google+ photo albums among others.
15. 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”. Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested.
16. SVG Magic
SVGMagic is a cross-browser compatible jQuery plugin that searches for SVG images on your site and automatically creates PNG versions if the browser doesn’t support SVG. It’s a simple, single-purpose plugin that requires no configuration.
17. 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.
18. Remodal
Remodal is a flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking. All modern browsers are supported. You can easily define the background container for the modal(for effects like a blur).
19. Slinky.js
Slinky.js is a jQuery plugin for creating beautiful scrolling navigation lists with stacking headers. It has numerous features such as smooth scrolling by disabling pointer events, Lightweight at around 1KB minified,refreshes on window resize and DOM mutation, and compatible with the latest version of your favorite browser.
20. Adaptive Backgrounds
Adaptive Backgrounds is a jQuery plugin for extracting dominant colors from images and applying it to its parent element. This plugin utilizes the canvas element and the ImageData object, and due to cross-site security limitations, the script will fail if one tries to extract the colors from an image not hosted on the current domain, unless the image allows for Cross Origin Resource Sharing.
21. 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.
22. Dynatable
Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it’s not just for tables. The purpose of Dynatable is to provide a simple, extensible API, which makes viewing and interacting with larger datasets easy.
23. jQuery Label Better
jQuery Label Better helps you label your form input like a boss with beautiful animation and without taking up space. The uniqueness about this plugin is that all you have to do is add a placeholder text, and we will show the label only when the user needs it.
24. Stickup
stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.
25. 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.
26. jQuery Interactive 3D
jQuery Interactive 3D is a plugin that allows us to accomplish a similar functionality using multiple images. It is so easy to use and works with a simple function and a list of specifically-named images. And, there are options for customization like the cursor icon, speed, touch support, auto-play and more.
27. Succinct
Succinct is a tiny jQuery plugin for truncating multiple lines of text. It shortens your text to a specified size, and then adds an ellipsis to the end. You can specify the elements that you would like to truncate as a selector, and then set the size parameter to the amount you would like to see.
28. SlideMe
SlideMe! is responsive, CSS3 compatible jQuery slider plugin which supports both limited or full screen views. It can be used vertically or horizontally, makes use of CSS3 transitions and has support for pagination. There are methods to control the slider (prev, next..), callbacks for each of them and much more.
29. Glide.js
Glide.js is a lightweight (4.5kb minified) jQuery plugin for creating sliders. It has completely customizable OOCSS markup and uses CSS3 transitions but has fallback to JavaScript. The slider is responsive; it’ll adapt well to all devices and comes with touch support. You can navigate through the items with keyboard, swipe events or with the help of the bullet and arrow menus. Glide.js also has a public API that supports all its events (play, pause, next, prev, etc.).
30. PhotoJShop
PhotoJShop is a jQuery plugin that enables us to apply such simple effects/filters to images. These filters include blur, sepia, emboss, lighten, darken, b&w, sharpen and more. The plugin works on canvas + images and the filters to be applied can be chained for easier usage.
31. One Page Scroll
One Page Scroll, a jQuery plugin, simplifies creating such websites so easy. It requires minimal setup, just create your HTML structure, call the function and you are ready-to-go. Optionally, the easing function, its speed and looping behavior can be set too. And, it has support for SEO-friendly URLs for each page.
32. FerroSlider
FerroSlider is a jQuery slider for creating full-page sliders (or content/image sliders) of almost any type. The contents can be placed in a flexible way, horizontal + vertical, and the plugin will simplify browsing through them easily. It uses CSS3 transitions for a good performance, works well with responsive layouts and works on mobile too.
33. Scrolld.js
Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience.
34. AnimateScroll
AnimateScroll is a simple jQuery plugin for adding easing effects to scrolling. It is possible to customize the style of scrolling (30+ scrolling effects) and scroll speed. There is also a “padding” option where we can manipulate “the position where the scrolling ends”. The plugin is not limited to the full body of the page but a specific wrapper element can be targeted too.
35. MasonJS
MasonJS jQuery Plugin was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges. Mason was made to fill those gaps in.
36. JInvertScroll
jInvertScroll is a jQuery plugin that manipulates the default scrolling behavior and forces a horizontal scroll. The plugin is lightweight (less than1kb) and works with almost no setup. Adding a specific class to wrapper elements and calling a JS function is enough. It also eases creating parallax effects with the onScroll callback where we can decide to animate any element.
37. Flowtype.js
FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer. The plugin has options for setting the min/max font-sizes and min/max widths where the resizing will be triggered.
38. nProgress
NProgress.js is a nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening. It’s a slim progress bars for Ajax’y applications inspired by Google, YouTube, and Medium. It’s perfect for Turbolinks, Pjax, and other Ajax-heavy apps.
39. Tidy Time.js
Want to display a time-based update in people-friendly language? TidyTime.js is a jQuery plugin that does just that, converting standard time formats into personable declarations of time.
40. Fullpage.js
FullPage.js is a simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites). It lets you create fullscreen scrolling websites as well as adding some landscape sliders inside the sections of the site. It is designed to fit to different screen sizes as well as tablet and mobile devices.
41. jQuery Flat Shadow
jQuery Flat Shadow is a plugin which can add this fading shadow to everything targeted. It is possible to define the shadow color, angle and enable/disable the fading.
42. Owl Carousel
Owl Carousel is a jQuery plugin that allows us to create responsive carousel sliders so quickly. The plugin is touch-friendly and capable of featuring any HTML content with almost any markup. It has options for setting the pagination/sliding speed, enabling/disabling auto-play, showing bullet navigation and more.
43. S Gallery
S Gallery is another jQuery image gallery plugin that displays images in a responsive grid. It is inspired from the gallery in Sony’s product pages (which is made with Flash) and mimics that completely. Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard.
44. Pop Easy
PopEasy is a light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.
45. Scroll Up
ScrollUp is a lightweight jQuery plugin to create a customizable “Scroll to top” feature that will work with any website, with ease. To create a visible line to help determine an ideal scroll distance from the top, assign a valid CSS color to the activeOverlay setting.
46. Mobiscroll
Mobiscroll is a wheel scroller/Date and Time picker jQuery plugin for touch devices (Android phones, iPhone, iPad, Galaxy Tab). The control can easily be customized to support any custom values and can even be used as an intuitive alternative to the native select control (dropdown list). The control is themable. You can easily change the appearance of if in CSS. It also comes with pre-defined, nice looking color schemes. It has been tested on iOS4, Android 2.2, Android 2.3, Chrome, Safari, Firefox, IE9.
47. Cycle 2
Cycle, a pretty old yet very popular jQuery slideshow plugin now has a new, improved version: Cycle2. The plugin is perfect for anyone looking to create a completely customized slideshow as it does not declare any markup or style. And, its functionality is flexible too. Cycle2 supports responsive layouts, has options for everything (global and per slide) and can be extended easily using a full-featured API.
48. Tooltipster
Tooltipster is a jQuery plugin for quickly creating HTML5-validated and flexible tooltips. The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease. Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined.
49. FitText
FitText is a simple yet very functional jQuery plugin for making sure a text fits into a defined element. It auto-updates the font-size in accordance with the width of an element wrapping it and guarantees a non-broken layout (because of the font size) even if the page is displayed from a mobile or desktop browser. And, there are some options provided for a fine-tune including the ability to set “level of scaling” and mentioning min-max sizes.
50. Unslider
Unslider is the jQuery slider that just slides. No fancy effects or unnecessary markup, and it’s less than 3kb. It’s fluid, flexible, fantastically minimal. Unslider’s been tested in all the latest browsers, and it falls back magnificently for the not-so-latest ones. If you want to, you can add keyboard arrow support. Not all slides are created equal, and Unslider knows it
