in Design

15 Very Useful jQuery Plugins

jQuery is a popular tool these days. For those who don’t know, jQuery is a JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Much of jQuery’s success is owed to its extensive library of plugins. With thousands of plugins in existence, and many more in development, there exists – for all practical purposes – a plugin to satisfy every developer’s need.

These 15 jQuery plugins are extremely useful for any type of projects so it’s a good idea to take them and store them for later use.


A full featured photo gallery, with navigation toolbar, thumbnails, autosize frame; you can also use it to show a public Flickr set or all public Flickr user photos.


When the Boston Globe launched its brand new ‘responsive design’ in September 2011, the internet gasped in collective awe. This was made possible with HTML5, and clever use of jQuery plugins such as FitText. FitText stretches or shrinks text dynamically to fit any screen size – an indispensable element of any responsive or fluid design. As responsive design becomes increasingly ubiquitous in 2012, the FitText jQuery plugin should be called into action more than ever before.

State Switch

Query 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time.


This plugin helps you create gorgeous full-screen slideshows – a design element that is bound to become more common with increasing broadband speeds across the globe.

AD Gallery

An image gallery plugin with a list of thumbnails below the image. Not quite like Lightbox or Thickbox, but more of a showcase type of gallery.


An open-source alternative to proprietary media players, jQuery allows you to insert rich media across browsers and platforms. Completely customizable with plenty of available integration plugins, this is one of the leading media libraries.

Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

Apple-like Retina Effect

Apple has long applied a winning strategy in marketing – create well designed products, have a dedicated fan base, and let the hype build up before every product release. Turn a static image into a fully functional “Retina effect” with only jQuery and CSS.


Another design-oriented jQuery plugin, Isotope helps you create radically stylized layouts with support for animations, sorting, and filtering of individual items.


Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Beautiful Slide Out Navigation Revised

This is a beautiful slide out navigation tutorial.

Creating a Keyboard with CSS and jQuery

Sometimes it’s just fun to play around with the programming languages we know and see what we can create. I thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. I’ll show you how to build it today.

Current Field Highlighting

As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. Some browsers (Safari/Opera) have decided that is so important, that it take matters into it’s own hands and applies a glowy blue border around active form elements.

Dance Floor

When you click on a product, the product image will zoom out to see a featured close-up shot and a description. When you click on another product, the last opened product will zoom back and the new clicked product will zoom out.

Drill Down Menu

This script turns an ordinary UL list into a drill down style menu, adding a new dimension to the conventional drop down menu. The top level UL dictates the height of the menu, with the sub levels tucked away until navigated to. You can customize which level should be shown by default, whether to remember the last shown level when the page reloads, plus the speed of the “drilling” animation. And to ensure the user doesn’t get lost with all this drilling, the script can optionally display “breadcrumb” links that reflect the current level the user is at.



Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.