Keeping up with the new jQuery plugin releases and developments sometimes feels like a full-time job! Every other day something new and better crops up that catches the eye and you think yourself “Wow, that looks good, I could use that!“.
For this post I have collected 25 of the best newly (or, pretty close to new) released jQuery plugins, and every time I do a post like this the plugins seem to get better and better and push development boundaries further and further away.
I hope you find these plugins useful.
Meerkat, depending on the options you have set, will slide or fade in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally. You have a choice of providing a close option which will simply close Meerkat until the page has been reloaded, or a dontShow option, which will close Meerkat until the browser session has ended, or for a set amount of days, depending on the options you have defined.
With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.
You will be able to stop switching between your Editor and the Browser and changes will occur immediately without reloading the page. Once you are finished designing your mockup you can generate the CSS code, copy and paste it to your stylesheet and tweak it to your likings.
TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page.
TipTip is a very lightweight (only 3.5kb minified) and intelligent custom tooltip jQuery plugin, it uses no images and is completely customizable via CSS.
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip Overview Video
jQuery-Notes is an easy to use jQuery plugin that allows you to add notes any images on your website.
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.
In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
This is a jQuery widget for the brand new social network -Google Buzz- that you can embed anywhere on your webpage to integrate your Buzz stream into your page.
gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.
When I say that gMap is very easy to use and install I am not exagerrating. Simply follow the simple steps outlined on gMaps homepage and you are good to go.
Quicksand is a very functional jQuery plugin for reordering and/or filtering items with a sleek and smooth shuffling animation.
This awesome plugin simply replaces a collection of items with another and also comes with a fair few options – like setting the duration or the easing type of the animation (optionally, Easing plugin can be used for more easing types).
The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder.
Hover the mouse over the image,click on the section of the image you like and hey presto your cropped PhotShoot image will appear. excellent plugin.
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
You have three predifined effects that you can use: Wave, Curtain and Zipper. And of course, you can made custom effects with a set of options that can set speed, number of strips, direction, type of effect, etc.
The effects are endless.
YoxView is a feature rich free image viewer for websites: Images are scaled to fit inside the browser's window, the images can be pre-cached in the background, slideshow-enabled – images may be played automatically, keyboard navigation enabled, it is fully configurable and its two main features are flexibility and ease of use
Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?
If so, Uniform is your new best friend.
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.
Don't like the default styling? Change it! Need another mark up? Edit it! No validation fits your needs? Write your own! Make your own ketchup with ease.
The jQuery Form Wizard Plugin will convert your regular forms into step-by-step form wizard without having to reload the page when moving from one step to another. The plugin is unobtrusive and gives you the ability to set up flow of the different steps, by creating specific routes based on user input.
This jQuery plugin recreates Google's imageless buttons and prove that it doesn't take a whole team of engineers and an endless cycle of code revision and quality control (Googles own words) to pull this off.
The buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.
jqIsoText is plugin for displaying your text with pseudo-isometric effect that will work without any additional CSS, but it can be easily custom styled.
This plugin can be implemented for text nods only.
The plugin works like this: At the beginning of every article you click on a small icon, a ligtbox will appear and asks you to select your language, it will then automatically translate the text. It really does work that easily.
Imagine, how users that don’t speak English as their first language could benefit from an integrated functionality across all websites.
Why do hover animations continue after I stop hovering? If you have asked yourself this question before then you really nedd the hoverFlow plugin!
A queued animation will only run if it corresponds with the current mouse position at "runtime". That is, a mouseover animation will only run if the mouse is currently over the element, and a mouseout animation will only run if the mouse is currently not over the element. Otherwise, the animation queue is empied.
xBreadcrumbs (Extended Breadcrumbs) is a jQuery plug-in to create categorized breadcrumbs for your site. This may be useful if your website has a deep structure and you want allow your visitors to quickly navigate through one section of the site to another. xBreadcrumbs works with unordered lists (UL/LI) which would make your breadcrumbs fully optimized for search engines. An SEO freindly breadcrumb has many benefits.
The installation of TopUp consists of including only one file (no images or stylesheets!), the look-and-feel is Apple-like, the animations and transitions look fancy, it is so easy to specify options and last but not least: you can stay updated with the latest version without changing any code.
Wheras this Firebug extension may not be very fresh, it is fresh to me, and certainly worth sharing.
jQuery expressions are intelligently presented in Firebug Console and the DOM inspecto, elements in jQuery collections are highlighted on hover, jQuerify: enables you to inject jQuery into any web page and jQuery Lint enables you to inject jQuery Lint into page being loaded automatically (great for ad-hoc code validation).
have a look at the screencast below for an overview of all its features: