30+ Must Have jQuery Plugins & Responsive Tools for Web Developers
jQuery, ‘the missing UI library for the web’ as they describe it, is an essential tool for designing modern web applications and interfaces. It provides a wide range of UI components and development tools that you can use to build rich web applications.
Today we are featuring 30+ jQuery plugins, libraries and tools that we have found useful. Hopefully, you will find them valuable for your upcoming projects.
If you know of any useful jQuery plugin that you have used or authored, do share in the comments section below.
Contents
CSS3 and jQuery Filtering and Sorting Plugin – MixItUp
MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It’s perfect for portfolios, galleries, blogs, or any categorized or ordered content.
Retina-ready Touch Supported jQuery Lightbox
Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet. It supports swiped gestures for mobile and keyaboard naviagte for desktop. It works with Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android and windows phone. It gracefully falls back to jQuery for older browsers with no CSS3 support.
Block Slide – A CSS3 Animated Modal Window Image Gallery jQuery Plugin
InsertHTML has shared with us a little jQuery plugin for Creating CSS3 Animated Modal Windows in an Image Gallery. He has also included a bunch of built-in animations for the modal windows giving some pretty cool effects.
You can set the animation you wish to use for the modal boxes as they slide in. There are seven animations: slide, zoom, rotate, fall, fly, rotatepoint and goround. You can also set the length you wish the entire animation process to go on in seconds. Best of all, you can use this on any project you wish, at no cost.
Shuffle – Sort and Filter a Responsive Grid of Items
Shuffle is a jQuery plugin to categorize, sort, and filter a responsive grid of items
Better Responsive Data Tables
Greepit has shared a simple but very userful code snippet which offers an intuitive way to work with responsive tables. Better Responsive Data Tables is what Greepit called their version of responsive data tables. The author divides every table row into a separate data block and rearranges the information for smaller screens.
Pinterest like Responsive Image Grid for jQuery – Mosaic Flow
Mosaic Flow is a free jQuery plugin to create an Pinterest like responsive image grid. It is lightweight, responsive and very simple to use.
Grid-A-Licious – Responsive Grids With jQuery
Grid-A-Licious is a jQuery plugin that enables us to easily create Pinterest-like floating-grid layouts. There are other resources to create such an output but Grid-A-Licious differs itself by offering a completely responsive solution.
Regardless of the screen size or device, the grid fits perfectly as it is floating and fluid. Plugin supports appending/prepending new items to the grid which is useful for dynamic layouts.
Freetile – jQuery Layout Plugin
Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout.
It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.
Shapeshift – Dynamic Grid System With Drag & Drop
Shapeshift is a plugin which will dynamically arrange a collection of elements into a grid in their parent container.
Responsive Web Typography – FlowType.JS
Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width.
FluidVids.js – Fluid and Responsive Videos for YouTube and Vimeo
FluidVids.js is a javascript alternative to FitVids.js, fluid width video embeds, faster more efficient code.
The demo includes both a YouTube and Vimeo iframe embed, both at different aspect ratios. Both fluid, both 100% width.
FluidVids.js tested in Chrome, FireFox, Opera, Safari, IE7, IE8 and IE9.
doubleTapToGo is responsive and touch-friendly dropdown navigation.
With more and more robust CSS frameworks coming each day, it has become very easy to create responsive HTML documents. In fact it’s now a fun thing to work the HTML and CSS using these CSS frameworks. Combining these frameworks with some CSS3 features you can create widgets like menus without writing any Javascript.
This is a menu system using the famous bootstrap CSS framework and we call it BootM. BootM is a pure CSS based navigation system, its responsive, supports unlimited levels and icons as well.
Device Agnostic Approach to Complex Site Navigation with Support for Touch and Keyboard Accessibility
A mobile-first example of using media queries and jQuery to make a decent site menu with drop downs. Special attention is paid to touch screens using click events for tap targets.
Horizontal Slide Out Menu
A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.
Responsive Side Toggle Menu
Side Toggle Menu lets you add a side bar menu to your page that slides in from the left or right edge of the browser window. It supports two types of unveiling- either by nudging the rest of the page and making room for itself, or overlaying the page.
CSS3 transitions are used to power the animation, ensuring a smooth visual experience even on low powered mobile devices. And speaking of mobile devices, the menus are adaptive in that it automatically switches to a basic drop down menu using a toggle button at the top of the page when the user’s device width is 480px or less.
Echo.js – Simple JavaScript Image Lazy Loading
Echo.js is a simple image lazy loading library, it’s less than 1KB minified.
Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute.
jQuery Plugin for On-demand Search Box: SeacrhMeme
SearchMeme – the idea is to provide a small search button that can be placed anywhere on the website (you may want to put it in your website header). Clicking on search button expands it to show a text box where you can type your search terms.
FeedEk jQuery RSS/ATOM Feed Plugin
FeedEk is a RSS/ATOM Feed Reader/Importer/Parser that is written with jQuery. You can obtain feeds easily from any domain.
A Secure & Free Login Script With PHP-MySQL
Clean, crisp, fast, free, safe, object oriented, high performant and reduced to the max. Including the best password encryption available in PHP (bcrypt with blowfish, using the official (!) PHP password hashing functions). This script works perfectly with PHP 5.3, PHP 5.4 and PHP 5.5! Available in a 1.) one-file, 2.) minimal (basic functions, 1 minute setup), 3.) advanced (verification, password reset, mails, etc.) and 4.) a full-MVC-framework-like version (PDO, professional structure, URL rewriting, basic UI and even a responsive layout).
Free, Interactive jQuery Plugin for Feedback Collection: Opineo
Opineo is free jQuery plugin for feedback collection by Greepit. It can be easily integrated with any website or application to quickly enable feedback collection.
Opineo lets you feel the real pulse of the public; it gives voice to your users and fans so they can express their likes, dislikes, turn ons, turn offs and wishes.
JavaScript Plugin for Generating and Animating Clean Gauges
JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting.
Oh yes, since it’s pure SVG, it works in almost any browser –
IE6+, Chrome, Firefox, Safari, Opera, Android, etc.
jQuery Animated Bar Plugin: jqBar
A simple jQuery plugin for creating animated vertical and horizontal bars. The plugin is called jqBar. jqBar can be used in variety of situations where you want to present data with some visual effects. It helps you crate beautiful bar charts to represent skill set or can be used as a progress bar. Plugin is very light weight and can be completely customized.
jQuery Broken Link Checker Plugin: jsLink
You have a web site with lots of web pages, each web page contains many images and links to other pages. You want to make sure that all links are working properly. Broken links or dead links leave bad impact on your web site user. To check that all links are working properly you can either check all the links by manually clicking every link or you can use some automatic process. jsLink helps you automatically check the broken links with just one click. jsLink is a broken links checker plugin, that can be easily plugin with in any web page.
jQuery Image Slider Plugin with Cool Transition Effects: Quake Slider
Using sliders is a very effective way to showcase your work, portfolio and anything for which you want attention of your visitors. Sliders are normally placed in places that are in line with user focus. E.g. header area which is the first area where user’s focus lands.
Quake image slider is a jQuery based image slider with cool animations effects and some of them are very unique. Like SwirlFadeIn, SwirlFadeOut and more.
With Quake image slider you can combine images with short summary/caption that helps you optimize contents for search engines and make SEO easy for you. You can also link your images to open detail for particular slide/image. With Quake Image Slider you have complete control over not just the orientation of each caption also you can control animation for each caption and provide different animation for each of the slide using callbacks.
gSlider: Lightweight, Versatile and Interactive jQuery Image Slider
gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.
Draggable Image Boxes Grid with jQuery
Here you ll learn how to create a template with a fullscreen grid of images and content areas.
The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.
Any List Scroller – jQuery Plugin To Scroll Lists
Any List Scroller (ALS) is the jQuery plugin to scroll any list, of any dimension, with any content.
CarouFredSel – Circular, Responsive jQuery Carousel
carouFredSel is a jQuery plugin that converts any kind of HTML element into an infinite and circular carousel. It can scroll one or more items at the same time both horizontally or vertically.
Every item can be displayed automatically and/or by user interaction (pressing buttons or keys on the keyboard).
Scrollbox – jQuery Plugin to Scroll Like Carousel or Marquee
Scrollbox is a simple, lightweight jQuery plugin to scroll a list like carousel or traditional marquee.
Portfoliojs – jQuery Plugin to Showcase Portfolio
Portfoliojs is a lightweight jQuery gallery plugin for your beautiful images with horizontal scrolling which supports desktop, tablet and mobile browsers.
jsCarousel – jQuery Content Slider
jsCarousel is a jquery slider plugin that slides contents in multi direction. jsCarousel slider can be used as a feature content slider as well.
You can put any kind of contents you want whether images, text, videos, news etc. You can make simple image gallery with thumbnail support by using it.
Chronoline.js – Chronological Horizontal Timelines
Chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale. From a list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and more.
