jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we will found some good ones for you. Here are 20 fresh jQuery plugins you have to know.
In this post you can fine 20 Latest jQuery Plugins and 100+ jQuery Resources. Enjoy!
You may be interested in the following modern trends related articles as well.
- jQuery Plugins – 20 Amazing jQuery Plugins and 100+ Excellent jQuery Resources
- Amazing Standalone Image Slider With Awesome Effects
- Related Posts Slide Out Boxes Menu with jQuery and CSS3
- Catch404 – jQuery Plugin For Handling Broken Links Smartly
- Full Page Background Image Navigation (Slide Effect) with jQuery
- Download jQuery MegaMenu 2 Plugin
- jQuery Validity Elegant and Powerful jQuery Plugin
Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.
HTML5 Placeholder jQuery Plugin
jQuery plugin that enables HTML5 placeholder support for legacy browsers.
The HTML5 placeholder attribute is awesome, unfortunately only supported by some browsers. This plugin replicates the placeholder behavior for unsupported browsers.
Compatibility: HTML5 Placeholder
Firefox: 3.7+, Safari: 4.0+ and Chrome 4.0+
Compatibility: jQuery Placeholder
IE: 6+, Firefox: 3+, Safari: 3.0+, Chrome, Opera, iPhone and Android
D ownload: https://github.com/danielstocks/jQuery-Placeholder/archives/master
Photobooth: Webcam Photo Shoot Upload with PHP, jQuery and CSS3
Photobooth will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
You can use this app as a fun addition to a community forum or other social networking website. You can optionally build in a comment field to go with the photo, or integrate it more deeply with your site.
Requirement: jQuery & PHP
jquery-ahm: A Better Way To AJAX Requests – Light-Weight jQuery Plugin
jQuery-ahm is a tiny (~1kb) jQuery plugin which enables us to create Ajax requests with a smaller code piece.
It is actually a wrapper around the popular
$.ajax method and brings a different way of handling callbacks.
Rather than creating custom callbacks for every Ajax request, jQuery-ahm lets the back-end define Ajax callbacks (handled automatically).
- Super light-weight: ~1KB minified
- Reduces ajax requests to one-line (including ajax form validation)
- No more custom callbacks for every ajax request
- Lets back-end define post ajax callbacks (applied automagically)
- Supports all jquery + custom callbacks in back-end code
- Drop in replacement for $.ajax() (supports all $.ajax options)
Here is an example where all the callback is handled on the server-side:
The bad part is, you move the front-end code and functionality to the server-side. This is not a preferred method for many designers/developers and it is mostly difficult if the front and back-end developers are different persons.
And the nice part is, size of the front-end code can be decreased seriously, specially for websites with lots of Ajax interactions and you get lots of flexibility in managing the callbacks.
Slider Kit – Multiple Contents Slideshow
Slider Kit is a very flexible jQuery plugin that enables us to create almost any type of slideshows like photo galleries, news sliders, carousels and more.
It is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one light and flexible plugin combined with ready-to-use CSS skins.
It has support for both horizontal + vertical sliders and items can be navigated via buttons, mousewheel, image click or keyboard.
There are lots of options provided like auto-start being on/off, animation types, navigation being an infinite loop or not, starting position of the slideshow and much more.
The complete skin of the slideshows can be customized with CSS and the plugin weights only ~8kb (minified).
Compatibility: All Major Browsers
Shutter Effect Photography Portfolio with jQuery and HTML5 Canvas
Shutter effect will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.
This requires a lot of processing power that web browsers just cannot provide currently, and as a result smooth animations are nearly impossible. But there is a way around this limitation. If you’ve played around with the demo, you’ve noticed how smooth it runs. This is because the frames are generated ahead of time and each one is built as a separate canvas element.
Download Shutter Effect jQuery Plugin
Requirement: jQuery and HTML5
jQuery Mega Drop Down Menu Plugin
jQuery Mega Drop Down Menu plugin for jQuery to create mega drop down menu. The Mega Drop Down Menu plugin takes standard nested lists and turns them into horizontal mega menus. A mega menu has several advantages over standard drop down menus, including:
- All options visible at the same time
- No scrolling and tricky mouse manoeuvres to see sub-menus fly out
- Using standard nested lists the groups can be easily structured and formatted with CSS
To get the full effect of the plugin use 3 levels of nested lists. To initialise the mega menu with the default settings – 3 sub menus per row and fade in speed of “fast” – use the following code:
The download zip file also comes with 8 different skins giving an example of more advanced styling. To use one of these skins wrap the mega menu in a div tag and assign the div with a class to match the skin name – e.g class=”black” and the mega menu ul tag with class=”mega-menu”. Then add the relevant css file to the head of the document.
Download jQuery Mega Drop Down Menu
Requirements: jQuery framework, hoverIntent plugin
The library is completely object-oriented and besides the canvas context, it provides access to mouse/keyboard events, drag ‘n’ drop and object animation.
Creating new objects is very straightforward with various built-in objects like
.image(), and much more.
Also, there is a huge set of functions that can complete almost any possible action within a single line.
jCanvaScript is very well documented and comes with examples for every feature.
jQuery Form Framework To Create Web Forms – jFormer
jFormer Creating a well-functioning jquery form framework, how simple or complicated it is, requires a serious effort as it has various ingredients including (cross-browser) design, validation, and usability.
is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that:
- Validate client-side
- Validate server-side
- Process without changing pages (using AJAX)
- Painless form validation
- Easily customizable using CSS
- User controlled field duplication
- Bot prevention (no need for CAPTCHAs)
- Users can save and resume forms
- Form triggers lock or unlock form fields
- One file for form generation and processing
- Templates for common forms
It enables us to build forms which are validated on client-side and server-side (PHP solution is included) with Ajax requests where users are notified in a very chic way with tooltips and CSS-styling on every level.
The framework has advanced features like cloning forms and/or form fields, dividing a form into pages, creating dependencies and much more.
Default styles for every part of a form is already included and they can be customized/improved further quickly with CSS.
jFormer jQuery Form Framework
jQuery Plugin To Display Password Strength: Naked Password
Naked Password is a jQuery plugin which helps to display password strength, in a fun way. With a single-line-function, it adds a notification to any password field where a pixelated-lady gets naked according to the password entered.
The whole idea of naked password is to encourage your users to enter stronger passwords. Our beautiful model Sally tastefully removes items of clothing as the password grows stronger.
A very good thing about how the plugin functions is that itdoesn’t require that much of an extra space to notify users. So, it can fit to many live forms without breaking anything.
Also, the images displayed can be changed with any others if you prefer to keep the site not-naked : ).
Download jQuery Plugin “Naked Password”
jQuery Page Layout Manager with jQuery UI widgets: UI.Layout
UI.Layout is a jQuery plugin for creating almost any type ofdesktop-like user interfaces with menus, status bars, toolbars and more. The panels created are totally customizable. They are collapsable, hidable, resizable and slidable.
Combined it with other jQuery UI widgets to create a sophisticated application. There are no limitations or issues – this widget is ready for production use.
Every panel can have its own headers/footers, can be managed with the help of hotkeys and any HTML element can be used inside them.
There are callbacks provided on every level and lots of methods exist for a complete control.
It can also work with jQuery UI components in harmonyto create totally advanced layouts.
Download jQuery Plugin: UI.Layout
Requirements: jQuery & jQuery UI
Compatibility: All Major Browsers
Download jQuery Component Library:Amplify
Amplify is a set of jquery components library to solve common web application problems with a simplistic API. Amplify’s goal is to simplify all forms of data handling by providing a unified API for various data sources. Amplify’s store component handles persistent client-side storage, using standards like localStorage and sessionStorage, but falling back on non-standard implementations for older browsers. Amplify’s request adds some additional features to jQuery’s ajax method while abstracting away the underlying data source.
Download jQuery Component Library
jQuery Plugin For Creating Magical Layouts – Isotope
Isotope is an impressive jQuery plugin that enables us tosort items and create smart layouts. Using the plugin, any given list of items can be filtered with show/hide effects and they can be re-ordered with slick animations.
The plugin’s layout features are very powerful as well. With a simple function, items can be converted into horizontal/vertical layouts or arranged intelligently within a grid and much more. And, all with nice animations.
Download jQuery Plugin For Creating Magical Layouts
Compatibility: All Major Browsers
jQuery Plugin: zClip lightweight jQuery “copy to clipboard” Plugin
zClip is a lightweight jQuery “copy to clipboard” plugin built using the popular Zero Clipboard library. This plugin uses an invisible Adobe Flash movie that is fully compatible with Flash Player 10 and below. zClip is a jQuery plugin for creating a “copy to clipboard” functionality with the help of an invisible Flash Movie.
jQuery Plugin zClip Features:
- Compatible with Flash 10
- Avoids built in browser security conflicts by using a 3rd party browser plugin (Adobe Flash)
- Invisible overlay, no interference with page design
- Support for CSS “:hover” and “:active” states
- Preserves the targeted element’s “click” “mouseenter” and “mouseleave” events
- Supplies callback functions for “before copy” and “after copy”
- Extremely light weight! (~7KB minified)
Download zClip “copy to clipborad” jQuery Plugin:
jShowOff: A jQuery Content Rotator – jQuery Plugin
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg.
<li>) inside a specified wrapper element (eg.
<ul>) on which
.jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.
jQuery HTML Content Rotator Plugin Preview:
The output is fully customizable with options provided for setting auto play on/off, speed of the transitions, controls on/off, effects and more.
- Option to show slides randomly.
Items in the rotator can be navigated with the help of a pagination, prev-next buttons and/or thumbnails (where all are optional.)
jShowOff is free for personal and commercial use under the MIT/GPL license used by the jQuery core libraries. Donations are appreciated, but not required (see ‘Donate’ button on the right).
Download jQuery Content Rotator Plugin
Quick & Easy Zooming With jQuery – Zoomy
Zoomy is simple. Zoomy is easy to implement and customize.Zoomy is a quick and easy plugin that will zoom into a picture. You only need two copies of one image first the display image and then the zoom image. Most CMS systems save or create multiple sizes of an image so its easy to set up. Just link the zoom picture on the display picture, and tell the plugin to use that link when zooming. It takes only a little bit of scripting. Zoomy is a very easy-to-implement jQuery plugin which helps creating zoom-to-image functionality.
Image Zooming Preview:
Besides the thumbnail, It requires a bigger size of an imageto display the part being zoomed.
It comes with several options like the zoom size, whether it’ll be rounded or not and image being clickable or not.
There is also a nice loader being displayed while waiting for the zoom to load.
jQuery Upload/Crop Image: Upload & Crop Image With PHP & jQuery
jQuery upload/crop image tool use for upload and crop different types of images, JPG, GIFs and PNG and you can now upload images and have a random file name (this fixes the caching issue some of you have had) you need “Image Area Select” plugin.
What we needed was a way to upload a JPG image, resize it if required then crop it to given height and width.
1. Firstly we created a form to allow us to upload an image. Pretty basic, nothing flashy there.
2. Capture, rename and resize the uploaded file. (We also provided a set name for the uploaded file.)
3. Now that the image has been uploaded and saved to our folder we can use the “Image Area Select” plugin to crop our image.
It basically provides the coordinates to the server to handle the crop.
- x1, y1 = coordinates of the top left corner of the initial selection area
- x2, y2 = coordinates of the bottom right corner of the initial selection area
- width = crop selection width
- height = crop selection height
There are a number of options with this plugin which you can see using the link above. We opted for an aspect ratio of 1:1 (height and width of 100px) along with a preview of what we are actually going to crop.
Download jQuery Upload/Crop Image
Requirement: jQuery, PHP & PHP GD Library
jQuery UI Elements Kit For Websites & Web App – Wijmo
jQuery UI elements kit for websites & web application on planet Earth. We call the new element “Wijmo”. Wijmo is a complete kit of over 30 jQuery UI Widgets. It is a mixture of jQuery, CSS3, SVG, and HTML5 that, when combined, become an unstoppable force on the web.
A Complete Kit of jQuery UI Widgets
- Everything you need to build killer web apps including grid, charts, menus and more.
- Built on jQuery UI Widget Factory.
- Completely ThemeRoller-ready, including a custom Aristo theme.
- Fully supported with forums, documentation and tech support.
Wijmo Complete is designed for individuals or businesses that want to purchase a complete kit of jQuery UI Widgets. It includes everything in Wijmo Open in addition to more complex and powerful widgets. Wijmo Complete is licensed per developer under the Wijmo Commercial License.
Wijmo jQuery Menu Element Preview:
Wijmo jQuery Tooltip Element Preview:
Download jQuery UI Element Kit – Wijmo
ProcessWire: PHP CMS + Framework With jQuery
ProcessWire is an open source content management system (CMS) and web application framework aimed at the needs of designers, developers and their clients. ProcessWire gives you more control over your fields, templates and markup than other platforms, and provides a powerful template system that works the way you do. Not to mention,ProcessWire’s API makes working with your content easy and enjoyable. Managing and developing a site in ProcessWire is shockingly simple compared to what you may be used to.
The application has a very low learning curve as there is no complexity and it is pretty developer/designer friendly considering it’s built to adapt to your way of doing things.
With the help of a jQuery-inspired API (a big “plus” for jQuery fans), it gives you the tools to reach data, but you make the markup.
Anything can be built with ProcessWire as all page fields in it are custom fields. It’s easy to edit, add, sort or remove fields from pages (via templates) as you see fit.
And, for maximum flexibility, fields can be as simple as containing raw text or numbers, or more complex like rich text editors, page-to-page relations and fields that hold files or images.
The application is friendly for end-users too as no details other than the “things-to-done” are displayed.
It has a modular plugin architecture for extending functionality and a must-check for any designer/developer (specially jQuery users).
jRating – Flexible jQuery Ajax Rating Plugin
jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from” the number of the stars” to “if the stars can represent decimals or not”. There is also an option to display small or big stars and images can be changed with any other file easily.
Although the plugin can be used with any scripting language,a PHP file that handles the requests is already included in the download package.
Download jRating jQuery Rating Plugin
Compatibility: All Major Browsers
Although the framework is in alpha stage, it is already well-documented and comes with multiple downloadable examples.
- Offline support (automatic cache manifest generation)
- Rich User Interfaces
- DataProvider for local and remote storage persistence
- Internationalization (i18n)
- Open Source (MIT License)
- NodeJS based build tools (called Espresso)
Requirements: Git & nodeJS
Compatibility: All Major Mobile Browsers
100+ Excellent jQuery Resources
- jSocialize – jQuery version of mooSocialize!
- jQuery Virtual Tour
- jQuery Shoutbox
- Coda Bubble Tooltip
- Flexigrid – Data Grid/Table
- Humanized Messages
- Img Notes
- Featured Content Glider
- Anti-aliased Rounded corners with JQuery
- jqDnR – Minimalistic Drag’n’Resize
- jQuery Date Picker
- jQuery Star Rating Plugin
- Scrollable HTML table
- Accessible News Slider
- Damn Small Rich Text Editor v0.2
- jFlow 1.2 – The Ultra-lightweight Fluid Content Slider
- Easy jQuery Pull Quotes
- jQuery Crash Course
- Getting Started with jQuery
- AutoCompleter Tutorial
- Multiple File Upload Magic
- Easy Ajax with jQuery
- jQuery in 15 minutes
- jQuery Tutorials for Designers
- Wrapping Images With A Drop Shadow
- Simplify Ajax development with jQuery
- Rounded Corners
- Getting Around The Minimum Height Glitch
- Multiple Fancy Drop Caps
- Semitransparent rollovers made easy with JQuery
- Using JQuery to modify presentation while preserving document semantics
- Fancy Drop Cap
- Easy Multi Select Transfer with jQuery
- Edit In Place with AJAX
- Style Sheet Switcheroo
- Safer Contact Forms Without CAPTCHA’s
- Photo Slider Tutorial
- Text box hints
- JQuery Pop-up Menu Tutorial
- A Quick Code Igniter and JQuery Ajax Tutorial
- jQuery and XML revisited
- What is JSONP?
- Creating A Sliding Image Puzzle Plug-In
- Slide out and drawer effect
- Creating accessible charts using canvas and jQuery
- jQuery liScroll – a jQuery News Ticker
- Visual jQuery 1.1
jQuery Plugin Directoies
- Visual jQuery 1.1
- Plugins | jQuery Plugins
- jQueryPlugins.com – The Home Of All jQuery Plugins
- 240 jQuery plugins
jQuery Video Tutorials
- Jquery Smooth Scrolling Tutorial
- jQuery AJAX forms Tutorial
- swfupload ajax jquery drupal module image editor
- jQuery 1.2.3
- Drag and Drop JQuery + AJAX
- jComboBox demo Tutorial
jQuery Cheat Sheets
- Color Charge jQuery Cheat Sheet (PNG Image, 1313×900 pixels)
- Charlotte web design jQuery Cheat Sheet (pdf)
- Jquery Cheat Sheet 1.2. (pdf)
- 50+ Amazing jQuery Examples
- 24 ways: Unobtrusively Mapping Microformats with jQuery
- A List Apart: Articles: Frameworks for Designers
- mad.ly – JQuery Ajax + Rails
- QuarkRuby: Why I moved from Prototype to jQuery
- XML.com: jQuery and XML
- A List Apart: Articles: Prettier Accessible Forms
- AlternateIdea: Your Mommas So Fat…Prototype vs. JQuery Edition
- Ajaxian » Prototype and jQuery: A code comparison
- 45+ Fresh Out of the oven jQuery Plugins
- Learning jQuery » A Plugin Development Pattern
- jQuery: » About client-side form validation and frameworks
- Why jQuery is The Answer » Articles » Lucumr