There are tons of fast, versatile and feature-rich solutions that are powered by it on the wild. High-value plugins are universal and can bring benefits to different projects and layouts. As a rule, we seek code snippets that were neatly and professionally converted into plugins that have documentation and intuitive manual.
These tiny and lightweight enhancements refine projects in terms of design, interactivity, user experience, readability and other significant and integral aspects.
List of Free jQuery Plugins
Datedropper is a lightweight jQuery plugin for working with dates that populate forms. It presupposes settings for customizing color, animation effect, language, format, background, border color and some others. The official website includes demos and all the necessary documentation.
With two traditional gallery styles, full and minimal, PhotoSwipe is aimed to showcase a series of images in the best possible light. It is a perfect match for modern responsive websites that should provide an optimal experience for different devices. The plugin supports all standard touch gestures. The navigation is also available through keyboard and intuitive interface with pixel-perfect graphics
Chartist turns the display of boring statistics into a captivating, engaging and visually interesting spectacle. This small, responsive SVG-based library lets build vibrant and dynamic charts. The only drawback is that the plugin is supported by modern browsers such as IE9 and higher, Safari 7, Android 4.3, Firefox 3.1, Chrome 3.5.
The main goal of Animsition is to enhance the user experience by making the transition between pages a pleasant event. This tiny jQuery plugin allows creating smooth and eye-pleasing CSS-powered animations that accompany shifting. It offers almost 60 different effects including standard fade series, fade-up series, fade-down series, rotate series, flip x/y, zoom series and overlay.
Strip is a modern solution to add an elegant lightbox to your website. It is smooth, sleek and smart. Since it takes up not the whole browser screen, users are left with free space and some other parts of the layout for better and less intrusive interaction. Moreover, it is driven by jQuery, so that all the modern browsers handle it.
Sweet Alert enriches regular and dull pop-up windows that appear when something wrong happens or when you require some interaction from the visitors. The plugin automatically centers an alert box and provides a semi-transparent dark overlay accompanying screen thereby easily focusing the whole attention on the content. It is highly customizable in terms of design and complementary effects.
Midnight offers a simple yet viable solution for improving and enhancing fixed top bars that, as a rule, are used as primary navigation centers or advertisement/info panels in long or parallax-based websites. It lets switch between several variants while the user is moving down.
Block Scroll was created to improve readability and user experience. Content heavy and information overloaded projects will feel the whole potential of this product. It breaks the page into digestible portions that are displayed one at a time, giving readers freedom and time to enjoy data.
Paper Collapse is a regular accordion that has a beautiful, sleek appearance and a handful of features. Being inspired by Google’s Material Design, the component employs Font Awesome icons to make the interface look more intuitive and more harmonious and stylish.
FocusPoint offers simple yet useful instruments for cropping of flexible image containers, making this process more intelligent and hassle-free. It is well-suited for full-screen images. It easily deals with different dimensions and two modes, such as portrait and landscape, in order to maintain consistency in style and provide better experience on smaller devices.
TextTailor is intended to work with text more efficiently. The plugin makes the content to be more responsive and mobile-friendly. Its primary function is to force the text to fill the height of the container thereby contributing to the general formatting and design aesthetics.
BootGrid is a small and powerful enhancement for Bootstrap-driven websites. It has an intuitive interface that improves work with one of the basic components. It easily transforms a primitive table into refined data table with extra controls and options.
PrettyEmbed allows populating projects with YouTube-hosted videos without delays and problems. It comes with such features as fetch the preview image that won’t look distorted on a huge or vice versa small screens, extra customization options, and native support for FitVids.
jsPDF is HTML5-based client-side solution for dynamically generating PDF files. The library is quite powerful in what it can do so that in order to feel its enormous potential you should visit the official website. It ships with numerous built-in functions and uses jQuery. As for browser compatibility, it works well in Firefox 3+, Chrome, Safari 3+, Opera and even IE 6 (with some tricks).
fontFlex is aimed to make the primary font of the website responsive and fully adaptive. The extension dynamically selects the right size that should make the content look more appropriate within a container or browser screen, improving readability.
Video backgrounds made easy with this super lightweight and smart plugin. Vide helps to enrich the website with lavish and dynamic visuals. It is supported by the latest browser versions; with one exception, as usual, IE8 and lower are left behind. Some versions of Android and iOS can also experience problems. For the rest, everything is fine.
Trianglify is all about fascinating, eye-catching and stylish polygonal art that beautifies an appearance of any website giving the backdrop a cutting-edge feel. The online tool automatically generates the vibrant and geometric style SVG background images that are constructed from triangles. You can specify the amount of objects, their size, color and even set the output format.
jBox is a small yet powerful and advanced plugin that deals with pop-up windows, tool tips, notices and images. Each one has its series of assigned effects that contribute to general aesthetics and user experience. It meets standards for retina screens and works great, even in IE8.
CrossFade is a minified jQuery plugin that weighs only 3kb. It is an excellent enhancement for long-page websites where images play the first fiddle. It preloads images as to not annoy users with a boring loading process.
Scrolling Progress provides your online visitors with visual indicator while they are moving down and exploring your long-page website. Designed with the help of HTML and CSS and charged with extra dynamic feel by jQuery, this framed code snippet can contribute to general experience and benefit any project.
tableExport works with various sorts of tables. You can export HTML table into such popular file formats as JSON, XML, PNG, CSV, TXT, SQL, MS Word/Excel/PowerPoint and even PDFs in several clicks.
Scroll Up Bar
Scroll Up Bar is particularly useful for mobile and tablet user interfaces that are suffering from a lack of free space. The plugin hides the navigation bar that as a rule sits on the top when the user starts to scroll down and shows it when a user is ready to go up thereby providing an extra space and not distracting from the design.
CoverVid is another viable and efficient solution to work videos into a project and set them as a basic background. It cooperates mainly with HTML5 videos. There are several settings that allow getting the most out of it.
Do we still need jQuery?
More jQuery Plugins
Bellow, you’ll find a list of free awesome jQuery plugins. And because our readers are what makes Designmodo great, we’ve carefully selected plugins that are actively maintained or, at least, have been updated in the past year. While I’ve used most of them in projects, there are some terra-incognita plugins that I am excited to test and implement. You’ll find some fancy galleries, awesome animations but also some functional components.
Freewall is a gorgeous cross-browser jQuery plugin for building grid layouts with nice CSS3 animation effects and call back events. Whether you are looking to create flexible layouts, images layouts, nested grid layouts or Pinterest-like layouts, Freewall is an all-in-one solution for creating dynamic grids for desktop and mobile. Freewall supports almost any browser in use today, including the ancient IE 8, making the plugin a truly universal tool.
multiScroll.js is an excellent plugin that will help you add a multi-directional scroll on your site. This plugin facilitates the creation of multi-scrolling websites with two vertical layouts or panels. It aims to catch visitor attention with an original page, without stealing from the actual UX. It’s fully functional on all modern browsers, and it even works fine on legacy browsers. Needless to say, the plugin is mobile friendly.
rowGrid.js is an extra-small plugin that places images or other items in straight rows. It’s great to display images in a non-intrusive manner, just like Google does in its image search. rowGrid justifies items in straight rows so that they fit nicely in the parent element. To do that, it adjusts the margin between items and scales down the items to fit them harmoniously in your canvas. However, you should use same height items, otherwise, the plugin won’t work as designed. Like any other modern plugin, it’s responsive and browser compliant.
Slidebars is a jQuery plugin that helps to add off-canvas elements such as push menus or sidebars to your website. Version 2 was completely rewritten with clean and discreet markup and features an unlimited number of off-canvas elements.
One of the best plugins you could choose for your project, especially if you are looking to create a one-page site is pagePillings.js. The interface acts like a pile of pages that move up on scroll creating an unforgettable and user experience. The navigation direction, scroll speed, and animations can be easily customized so you can see what you want. Speaking of customizations, the possibilities that this plugin hides under the hood are immense. The plugin is fully responsive so it will look marvelous on all screens. The plugin is rendered in most browsers, including IE8.
The primary goal of Animsition is to enhance transitions between pages to provide an enjoyable user experience. This light jQuery plugin allows creating smooth and beautiful CSS-powered animations that accompany page transitions. With more than 60 different effects including standard fade series, fade-up series, fade-down series, rotate series, flip x/y, zoom series, Animsition is a must have plugin.
Rippleria is a lightweight Material Design-inspired jQuery plugin. It offers a ripple effect on click/tap that enriches the visual experience for users. It can be applied to DOM elements like buttons, icons, DIVs or images. It’s easy to implement and customize.
I’ve never seen a jQuery with such a detailed documentation as Flickity. Precise, detailed and logically structured, the devs behind Flickity deserve a prize for the best documentation of the year. The product itself is eye candy. It’s one of the best carousel plugins out there. It’s touch friendly, responsive and flickable. Flickity also spots a full API which is pretty cool if you ask me. Flickity is free for personal use, however, you’ll need a paid license if you intend to use the project commercially.
Unslider is the quickest and easiest way set-up a slider on your website. Unslider is small, but it’s flexible. It allows designers the freedom to alter anything they want through options or settings, methods or callback events.
Lightcase is a great lightbox plugin. While the plugin doesn’t work yet with jQuery 3, the developer is planning a new release. Lightcase is a great tool to create a responsive, CSS3 animated lightbox. It uses CSS3 animations such as scrollTop, scrollRight, scrollLeft, scrollVertical, scrollHorizontal, scrollBottom, fade, fadeinline and elastic. It supports DIVs, images, text, flashes, iframes, videos, etc.
Strip is a flexible solution to add an elegant lightbox to your website. It is smooth, sleek and smart. On large screens it only partially covers the page leaving UI elements, text or some other parts of the layout uncovered for better and less intrusive interaction. On small screens, it acts a classic lightbox. The plugin is easy to use and offers a lot of settings to tweak.
There are a lot of plugins who promise a great showcase for your product, some deliver, some are just snake oil. If you want to showcase your product in a dynamic and immersive experience, the Turntable.js is the plugin you need, especially if you are selling a physical product. When I initially tested the plugin, I couldn’t believe that you can get such a streamlined 360 view. In fact, Turntable is revolutionary compared to the suite of web sliders, jQuery sliders and image viewers we are accustomed to. One of the main selling points of the plugin is that you can get rid of naughty navigation icons, and you can rotate or flip images with your mouse or finger on a touch-enabled display. Installation is simple, and the code is clean.
The easiest way to add a video background for your site is Vide. Supported on all modern browsers, Vide will help you get stunning visuals for your project. It has the setting you would expect from a video plugin so you can get the exact look you need.
Don’t want a video playing in the background but you find the usual picture or color background boring then Trianglify is for you. It generates unique algorithmic triangle patterns. You can specify the variance, cell size, and color. If you are in a hurry, you can use the Triangle Generator. The pattern can be rendered as canvas, .svg and .png. You can even write your own rendering implementation.
If you prefer to keep your main menu simple, but you have a huge menu tree, then an additional sidebar menu should help you achieve a balance between usability and completeness. LazeeMenu turns nested unordered links into a multi-level navigation menu. With a little bit of tweaking, you can customize the plugin to suit your needs.
You just launched a new version of your app. Feeling proud and accomplished? Then you probably should share the news with the world. Webticker is a great jQuery plugin to help you accomplish that. The author of this plugin has an excellent step-by-step guide that should help you to get started. Webticker has a lot of settings under the hood so you can fine tune the exact look you want. There are case scenarios for this plugin: news, announcements, sales, etc. You can even place images in your ticker, however, I strongly recommend avoiding this feature unless you want to induce motion sickness in your users.
The say UX is in the details. Remember the times you had to recomplete a form just because you entered an invalid date format? I do! And I hate when it happens. That’s way, every time I implement a form, I use an input mask. It helps the user with the input by ensuring a predefined format. It is useful for dates, numerics, phone numbers and so on. jquery.inputmask is a lightweight jQuery plugin that does the trick. It’s easy to use, flexible and has a lot of options. It also supports dynamic-masks, regex-masks, alternator-mask, etc. Give it a try, you’ll love it.
If you need a simple plugin to autocomplete the domain part of an e-mail address, then jquery.email-autocomplete.js is the best choice. Based on a list of predefined e-mail domains, the plugin will suggest the corresponding domain. Your user will press either the tab key or the right arrow key, or click on the suggestion to automatically fill the rest of the domain. The plugin works for mobile users, too.
If you are looking for a tiny, fast, scalable, flexible and pluggable date/time plugin, take a look at tinyDatePicker. There is a lot of functionality embedded in 5kb. Calendars, agendas, booking systems are a few scenarios where this plugin could be quite handy. It’s as versatile as it gets. Did I mention that the plugin can easily be integrated with Bootstrap or any other framework you may wish?
Fugit irreparabile tempus. With 20 browser tabs opened, a dozen of notifications on your smartphone, and a constant flow of information, we have less and less time to read. ReadRemaining.js won’t magically stop time, but it will tell your readers how long they’ll need to read your article. The plugin is subtle, and it doesn’t interfere with the actual reading.
Tooltips are text labels that appear on user actions. As long as they are not abused, tooltips provide a nice way to enhance the UX on your app. Tooltipster is an extensible jQuery plugin that helps you achieve a rich functionality for your tooltips. Simple enough for everyone, powerful enough for everything.
This is an easy-to-implement jQuery plugin that will quickly and dynamically convert HTML tables to Excel spreadsheets, comma separated values, and plain text .txt with only one line of code. Yes, it’s that simple.
Addel is a lightweight jQuery plugin for powering UIs that implement dynamic addition and deletion of HTML elements, conceived with form elements in mind. The plugin is intuitive and flexible and will spare your time when building dynamic forms.
Chart.js is the best plugin for displaying statistics. Display data with eight chart presets. The charts are responsive and scalable. It also implements transition animations when changing data. The rendering performance is excellent across all modern browsers. It’s an actively developed plugin with new features added regularly. No more boring charts.
This the best plugin to bring life to your texts. Literally. Flip-Quote creates a pull-quote from a text quote found in your document and flips to reveal the quote once it’s scrolled into view. It also highlights the quote origin in the document. No more boring quotes.
If you want to increase traffic to your site, app or product exposure, maintaining a social media presence is essential. Sharetastic is my plugin of choice when it comes to displaying social share buttons. It’s fully customizable, has three built-in themes and is very easy to use.
HideSeek is the search plugin you’ve always looked for. It’s interactive as a search module can be. It can highlight the searched term, navigate between results, ignore elements, ignore accented characters and it even supports lists with headings.
An eye-candy time dropper plugin. It’s quite customizable as it has four style options (primaryColor, textColor, background-color and borderColor) and six feature options (autoswitch, meridians, format, mousewheel, init_animation and setCurrentTime). There are other similar plugins, with more functionality, however Timedropper is sleek, intuitive, and gets the job done nicely. Also, take a look at datedropper, a similar plugin, created by the same developer. It has eight feature options and eight styles, so you can receive the exact look you need.
When it comes to enhancements and improvements, it is hard to find something better than a pack of tried-and-true and approved by dev community jQuery plugins. They are proved to be the most viable, easy, cost-effective and time-saving solutions.
You can solve a bunch of common problems with the help of them, starting from making more eye-catching calls to action to enriching user experience in long-page websites with extra informative indicators or captivating effects. Some of them have a great informative background, others should be perceived on an intuitive level, yet all of them deserve your attention.