jQuery is a fantastic JavaScript library, we know this. We also know that there are lot of cool plugins out there which take things to the next level. If you’re an amateur dev, plugins expand on your capabilities by implementing things you might not know how to do yourself, yet. If you’re an expert programmer, they can make your job go a whole lot faster, or even just provide inspiration.
Whatever the case, we’ve collected some of the best and most interesting jQuery plugins that we’ve found, and listed them all here, in alphabetical order:
Whatever the case, we’ve collected some of the best and most interesting jQuery plugins that we’ve found, and listed them all here, in alphabetical order:ARGS.JS
A .NET library designed to allow for binding command line arguments to POCOs. Args.js has conventions-based configuration and a Fluent API. It also has out-of-the-box support for type conversion of all “simple” .NET types.
BACKGROUNDCHECK
BackgroundCheck is a plugin that automatically switches the brightness of an element depending on the brightness of the images behind it. If an element overlaps any of the images, either .background–dark or .background–light is added to it. BackgroundCheck does not change an element’s style , however it can be changed through CSS coding.
Some of the options include:
- targets: Elements to be processed.
- images: Images to be used.
- changeParent: Determines if classes are added to a target or to its parent. Default false.
- threshold: Midpoint between dark and light. Default 50 (%).
- minComplexity: Minimum image complexity required before the complex class is added to a target. Default 30 (%).
- minOverlap: Minimum overlap required between an element and any of the images for that element to be processed. Default 50 (%).
- maxDuration: Maximum processing time allowed. Killed if it takes longer. Default 500 (ms).
- mask: Used internally when checking if an element overlaps any of the images. Default { r: 0, g: 255, b: 0 }
CAPITAL LETTER
Capital Letter is an exceptional lightweight plugin which enables you to create amazing capital letters for each of your paragraphs. It’s user friendly and is easily customizable.
COLPICK
Colpick is a jQuery plugin that mimics the Photoshop color picker. Its interface is similar to that of Photoshop, hence it is very familiar to most users. It has a minified code of less than 30kb. It has customizable light and dark CSS3 skins. It is extremely easy to implement, and works and looks nice even in IE7.
COUNTDOWNTIMER
CountdownTimer is a reverse countdown timer plugin which can display your customized countdown setting when you need it. It can also display the local time in the user’s area.
COUNTUP.JS
countUp.js is an independent, lightweight JavaScript “class” that creates quick animations that display numerical data in a more interesting and different way. Despite its name, countUp can count in either direction (up or down), depending on the startVal and endVal parameters that you pass. It supports all browsers.
COVERPOP.JS
CoverPop is modal splash page plugin that is easily customizable. It works by revealing a lightbox popup with cookie integration.
COVERFLOW
Coverflow is a jQuery script which aims to create a functional and seamless “coverflow” effect. It achieves this effect with a combination of jQuery, jQuery UI components and CSS3 transforms. It also provides swipe support for mobile smart devices.
CROPPIC
Croppic is a jquery plugin for image cropping. First, simply upload an image, and then you can crop the image as you like with the zooming in and out functionality.
Options in Croppic include:
- Upload Url
- Upload Data
- Crop URL
- Crop Data
- Preload Image
- Controls
- Output URL
- Custom Upload Button
- Modal
- Loader HTML
- IMG Eyecandy
- Callbacks
DATA IMG
Data Img is a tiny and responsive image delivery plugin, which depends on the screen width. It is ideal for a CMS that spits out a few different sizes for you to use.
DOCTORED.JS
Doctored.js is a user-friendly XML editor. It provides live validation against rulesets (RelaxNG or W3C Schema) occurring in the browser. It works by turning text selections into XML elements, which enables to view document structure at a glance. It also has code completion and contextural help (from schema) and optional keyboard-only interface.
DROP.JS
Drop is a great JS and CSS library for creating dropdowns and floating displays.
DUG.JS
Dug is a simple and lightweight, library independent, script which gathers feeds of content available on the web as JSONP to display on your site.
EDITABLE-TABLE
Editable-table is a minified (3KB, < 120 lines) jQuery plugin which transforms any normal HTML table into an editable spreadsheet. It supports validation and change events (so you can warn the user about invalid input or prevent invalid changes) and Native copy/paste. It also uses standard DOM focus for selection which does not interrupt scrolling or tabbing outside the table. It is easily customizable with CSS, works well with Bootstrap, and is dependent only on jQuery.
EMAIL AUTOCOMPLETE
Email AutoComplete autofills the domain with suggestions every time a user types in an email address field. After suggesting a predefined email domain, the user can use TAB or click (tap for mobile users) the suggestion to fill in the rest of the domain.
FIT.JS
Fit is a script that is basically meant to fit things into certain spaces in your websites. Options include bar, cover area, horizontal align, vertical align. It can be configured with callbacks and your own personal customizations.
FLOATLABELS.JS
Floatlabels create floated labels, which stay unless they are cleared by the user. On user interaction with an input field, the placeholder value moves up, and is displayed above the typed text. Upgrade your forms now!
FLUIDBOX
Fluidbox is a lightbox that creates seamless transitions. It supports all browsers except Opera Mini, and may not work perfectly on mobile devices. The plugin deals with higher resolutions, linking images elegantly. It pre-loads them when users click on the thumbnails, therefore conserving bandwidth usage for your visitors and your server(s). The plugin is relatively lightweight: 6.23kb (1.98kb after gzipped) for the minified JS file, and 1.91kb (728b after gzipped) for the minimal stylesheet.
HEADROOM.JS
Headroom.js is a high performance lightweight JS widget which enables you to react to the user’s scrolling actions. It works by sliding out the header of the page when scrolling down, and showing the header of the page when the user scrolls up. It enables you to bring essential elements in view, and give a better focus on your content for almost the entire time.
HIGHLIGHT.JS
Highlight works as a syntax highlighter written in JavaScript. It can be used in the browser as well as on the server. It is adaptable with almost any markup, and doesn’t depend on any framework. It has automatic language detection.
IMAGEFIT
ImageFit is a plugin that resizes images to fit any way and anywhere, with customizable standard sizes and orientation. It can also filter images to be ignored, in cases where you might use gallery thumbnails.
IMAGELIGHTBOX.JS
ImageLightbox.js is a minimalistic, responsive, touch-friendly lightbox script. It’s modifiable and configurable (only 4kb minified) using CSS transforms and transitions for moving images. It is iOS, Android and Windows Phone compatible, jQuery 1.x and 2.x compatible. It pre-loads the next image so that it will show up with no delay. It can also interact with the keyboard.
INSTANTCLICK
InstantClick is a JavaScript library that intensely speeds up your website, making navigation instantly fast. It preloads links to prevent internet latency, hence a much faster loading time for clicked links and pages.
JINVERTSCROLL
jInvertScroll is a small jQuery vertical scroll/horizontal move plugin with parallax effect. It is easily customizable and requires very little configuration.
JQUERY ADAPTIVE BACKGROUND
jQuery Adaptive Background works by extracting the dominant color of an image, and then applies the same color to the background of its parent element. This creates a makeshift background that follows the prevailing color of an image.
FONTICONPICKER
The jQuery fontIconPicker makes adding an icon picker and search function to your administration simple. It can be triggered on a SELECT or TEXT input, and has multiple usage options.
jQuery fontIconPicker is a small (3.22KB gzipped) jQuery plugin which allows you to include a stylish icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using aSELECT field, an Array or Object of icons or directly from a Fontello config.json or IcoMoon selection.json file.
JQUERY GA OUTBOUND
This plugin implements outbound tracking when Google Analytics is active on a blog.
JQUERY.KEYFRAMES
Keyframes is a jQuery plugin which allows progressive generation of CSS3 with callback functions.
JQUERY LIGHTGALLERY
jQuery lightGallery is a lightweight lightbox gallery used for image and video gallery display. It has a responsive layout, provides touch support for mobile devices and animated thumbnails. Apart from this, it can be used for and with Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, Windows Phone. It uses CSS transitions with jQuery fallback. It supports youtube, vimeo, and html5 videos, and also supports HTML iframe. It has slide and fade effects. It provides multiple instances on one page. With its 7kb minified code, it is easily customizable via CSS and Settings. It can use separate images for mobile devices, and can be extended with callbacks. It has smart image preloading and code optimization. It provides keyboard navigation for desktop and font icon support.
JQUERY LISTNAV
jQuery ListNav adds a smooth “letter-based” navigation bar to all of your site’s list. It works by clicking a letter to filter the list to show items that match the same letter. It can be installed using Bower, or manually.
RESIZEEND
ResizeEnd is a jQuery plugin which handles events after a window has been resized.
SEARCHER
Searcher is a plugin that works by connecting list-like data to search data inputs. It provides different variations on showing the lists such as card, table and list view.
TIP CARDS
The Tip Cards plugin can create a layout of cards with a card-like simulation that lets the viewer flip them, similar to that of the Google Tips Page. There are various animation options which you can use with modern browsers such as Chrome, Firefox and Safari. You can use callbacks to perform the actions before, or after, the modal opens.
LAZYLOAD
This provides a “lazyload” function for images, iframes, or anything else. It currently supports all modern browsers.
LEAST.JS
Least is a javascript plugin that randomizes images in your image gallery. It is responsive and is optimized for high-precision pixel displays like retina devices. It is compatible with modern browsers.
MAPSED.JS
This is a plugin that allows users to “select” a place (you get a callback detailing what they picked) and for adding “custom places”. This supports firing a map up full-window (without having to create a DIV on the page), add searching to the map, and Add/Edit and update your own “custom places” (i.e. not those in the Google Places API doesn’t know about, but you do). This also works with multiple maps on the same page
MATTER.JS
Matter.js is a jQuery plugin which creates 2D representation of physics components such as shapes, pyramids, gravity, and friction. It features collision queries (raycasting, region tests), time scaling (slow-mo, speed-up). It has 2 renderers, a Canvas renderer (supports vectors and textures), and a WebGL renderer (requires pixi.js). MatterTools is for creating, testing and debugging worlds. It supports Cross-browser (Chrome, Firefox, Safari, IE8+) and Mobile-compatible (touch, responsive).
MAXLENGTH
maxLength is a tiny jQuery script used for limiting the length of text areas, and reporting the remaining characters effortlessly. It works by fixing the maxlength inconsistencies of modern browsers.
MULTISCREEN.JS
Multiscreen.js is a modest and user friendly jQuery plugin which turns a single page into a collection of screens with animated navigation. It works by separating your page into screens, then moves to building navigation in between screens. With its minified code, it can be easily customized and has the option to navigate manually with javascript. You can also set the default animations, times, distances and delay for each screen.
NOTEBOOK
Notebook is a simple and smooth WYSIWYG text editor for web applications. It requires jQuery-Notebook’s default styling FontAwesome draw the icons on the context bubble.
ORBIT.JS
Orbit is a library script for coordinating and synchronizing contets and data resources. Orbit provides a foundation for building advanced features in client-side applications such as offline operation, maintenance and synchronization of local caches, undo/redo stacks, and ad hoc editing contexts.
PANORAMA VIEWER
Panorama Viewer is a jQuery plugin that can be used to embed interactive panorama pictures simulation on your site. It is compatible with modern browsers such as Chrome, Firefox, and Safari. It is also compatible both on desktop and smartphones.
It works by following these 3 steps:
- Including the latest jQuery library together with jquery.panorama_viewer.js and panorama_viewer.css into your document’s .
- Add your image via HTML.
- Make sure to change the source of the image and call the function.
PARALLAX-IMAGESCROLL
This is an image scroll plugin enhanced with a parallax effect. It mimics the image scroll effect on spotify.com. It is simple and easily customizable. It makes use of cCSS3 transform for animation where supported, and falls back to top and left positioning for ancient browsers.
PLACEHOLDEM
Placeholdem is a JavaScript plugin which creates animation for placeholder carets on inputs and text areas. The placeholder value will slowly delete on focus, and restore on blur.
PLANETARY.JS
This is a JavaScript plugin with wonderful interactive globes for the web. It is fully customizable, including colors, rotation, and more. This displays animated “pings” at any location with custom colors and sizes. It has mouse drag + zoom support. It is extremely extensible via a plugin-based architecture. Best part is, it is 100% free and open source.
PROGRESS
Progress aims to help developers by creating a JS and CSS3 library which can manage progress bars for every object on page.
RANGESLIDER
Rangeslider is a neat and slick JavaScript/jQuery polyfill for the HTML5 slider element. It is touchscreen-friendly and supports all major browsers including IE8+. It recalculates upon resize, hence it is suitable for use with responsive designs.
RATCHET
Ratchet makes it possible to create sites exclusively for mobile use with modest HTML, CSS and JS components.
REMODAL
Remodal is a responsive and lightweight modal window plugin which prides itself on declarative state notation, hash tracking, and a flat design. It supports all modern browsers, and the zepto JS library in addition to jQuery. Only webkit browsers have a blur effect in the default css theme. If you want a blur for other browsers, use this: https://github.com/Schepp/CSS-Filters-Polyfill, but it’s not fast like a native CSS3 blur.
ROWGRID.JS
rowGrid.js is a lightweight jQuery plugin (~700 bytes gzipped) used for placing images in straight rows. It produces a grid of images that is similar to Google Image Search, Flickr, and Shutterstock.
rowGrid.js is responsive and allows infinite scrolling. All items must follow a standard height, however the width can vary. It justifies the items by using straight rows in such a way where the width of the rows are proportional to the width of the container/parent element.
Initially, rowGrid.js modifies and adjusts the margin between items, and if this is not enough, it scales down the items.
SCROLLREVEAL.JS
scrollReveal is a script plugin that reveals elements as they enter the viewport. It supports and is developed for modern browsers, with a minified code of 3.2 kB Gzipped.
SLINKY.JS
Slinky.js is a jQuery plugin used for generating stunning scrolling-driven navigation lists with stacking headers. It has several features which include:
- Smooth scrolling
- Lightweight at around 1KB minified
- Refreshes on window resize and DOM mutation
- Compatible with the latest version of your favorite browser
It works by including the downloaded file in a script tag after jQuery and calls .slinky() on the jQuery element you want to activate Slinky on.
SMOOTHZOOM
Smoothzoom is a responsive jQuery plugin that can zoom inline page images. The images zoom from their location on the page upon clicking, and zoom out upon closing back to their original size. It is minimalist and has a neat interface. It provides keyboard access for previous (left arrow), next (right arrow), and close (esc or down arrow) functions. It is free for commercial and personal use.
SOCIALSHARE
SocialShare is the optimal choice to create customized share buttons and share counters from your site to social networking sites like Facebook, Twitter and Instagram. It can also generate share links.
VANILLABOX
VanillaBox is a functional and simple modern Lightbox-like plugin. It is easily customizable and set up with your image gallery. It is a meek plugin which makes it easier to focus on content. It supports modern browsers, including those for mobile. It works seamlessly even with zooming on pages.
WANKER
Wanker reveals a takeover whenever people excessively start resizing browsers. It has a minified code of 549 bytes, and has a responsive design. This plugin is perfect for designers, photographers, writers, and anyone in the creative field who wish to move the focus onto their work content and away from the page’s break points.
WEBKIT.JS
A port of WebKit (specifically, webcore+libs) to JavaScript designed to run in both node.js and browsers. This is currently available for contributors and testers. However, this is not yet recommended for production or beta environments.
WOOKMARK
Wookmark is a plugin which creates dynamic grid layouts.
Post a Comment