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.
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: http://github.com/danielstocks/jQuery-Placeholder/archives/master
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 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).
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 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 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 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:
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.
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:
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
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”
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
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.
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
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.
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.
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).
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.
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 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.
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.
Requirement: jQuery, PHP & PHP GD Library
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.
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 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).