17 Useful jQuery Plugins to Improve the Look and Feel of Your Website

Ever heard of JavaScript? I bet it’s a Yes if you’re a web designer and how long did it take for you to master it? Unless you are a genius, it does take some time to learn how to use it and only after that create some great websites.

For those of you who have not yet worked with JavaScript and it kind of scares you – we have good news for you. If you want to increase the usability and the appearance of your website – you can use a really powerful framework to help you out known as jQuery.

jQuery comes in handy  when you want your website to look nicer and user-friendly. Let’s say you would like to add something interactive to your future website, then you could use one of the jQuery plugins and for your information it has many of them at your disposal.

What’s more, thanks to all those skilled developers these plugins appear all the time, so that you could use something fresh and up to date for your website. You can easily find them on the Internet, but we can help you with that and offer you a selection of 20 fresh and useful jQuery plugins that you might consider using. Enjoy!

jQuery Plugins

jQuery Quicksand plugin

Reorder and filter items with a nice shuffling animation.

iPhone Style Radio and Checkbox Switches using JQuery and CSS

A simple technique for creating radio button and checkbox switches with jQuery.

jQuery MegaMenu Plugin

This is a sequel to the popular jQuery MegaMenu Plugin, with quiet a lot of changes in the code base and usability.

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

jQuery Slider plugin (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin

Contextual Slideout Tips With jQuery & CSS3

A set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

TipTip jQuery Plugin

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 is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

Contactable

Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort. If you have ever seen the feedback forms provided by kamypyle you will be familiar with the technique they use, however contactable makes this process even simpler by overlaying the content onto your page quickly and easily with a slide effect and inline validation.

Smooth Animated Menu

A jquery plugin that allows to make smooth animated menu.

Crazy Dots jquery plugin

This plugin takes a few CSS3 techniques which are: rotate, border-radius, and linear-gradients to make an ajax loader like effect. The plugin works even with IE browsers(depends on jQuery 2D Transformation Plugin above)

UI Elements: Search Box with Filter and Large Drop Down Menu

A search box with a filter has a slick looking details. This search box will reveal a drop down menu after the user clicks into the input field when implemented to the page. With the filter built-in, users can select options for searching.

Cloud Zoom

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Nivo Zoom

Features

  • 5 different zoom types
  • Optional overlay support
  • Supports HTML captions
  • Simple clean & valid markup
  • Loads of settings to tweak
  • Packed version only weighs 4kb
  • Free to use and abuse under the MIT license

Beautiful Photo Stack Gallery

A fresh idea for a photo gallery. The idea is to show the albums as a slider, but in the stack view. We can browse through the images by putting the top most image behind all the stack with a slick animation. However, the plugin works if you use a Webkit browser like Chrome or Safari because of some Webkit properties. However, if you use it together with jQuery 2D Transformation Plugin above, you won’t worry about cross browser compatibility anymore.

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

8 Comments
  1. suraj Mar 6, 8:23 pm

    Great list! Most of them are really awesome, I think there is nothing better than giving unique look to website/blog, and these types of plugins are the best way to achieve that. Thanks for the nice list.

    Reply
    0
  2. j Richardson Mar 7, 12:46 am

    Wonderful article. I was looking for an easier way to integrate some of this stuff, as my knowledge is limited on web design. This definitely gave me a few useful tips for my website.

    You should do more articles but smaller and in depth so that we can see the true power of these programs.
    Thanks a ton!

    Reply
    0
  3. Bowe Mar 7, 4:22 am

    Great roundup! Super useful set of JQuery plugins that will enhance your website designs. Your clients will love how you’ve made their site stand out using these simple resources.

    Thanks DM!

    Reply
    0
  4. Hannah Hurst Mar 7, 12:49 pm

    A great list of plugins! Jquery can really add a beneficial wow factor to web design and the list provided here demonstrates just that. Thanks for sharing.

    Reply
    0
  5. Jason Mar 7, 12:52 pm

    Those are some very useful plugins. It never fails to amaze me what can be done with jQuery.

    Reply
    0
  6. Chuck Braman Mar 8, 4:25 pm

    Thanks, but one frustration re: your suggestion in the intro that jQuery saves you having to learn Javascript, which is that I have yet to find one book on jQuery that doesn’t state that a prerequisite to working with jQuery and understanding the book’s contents is to learn Javascript first. If you know of a source that would allow me to bypass this, please pass it along, because would like to learn jQuery without learning Javascript first.

    Reply
    0
  7. Brett Widmann May 13, 2:51 am

    I really like these plugins! Who am I kidding, I love pretty much everything that is jQuery.

    Reply
    0
  8. Swinxy Jan 11, 12:42 pm

    Hi Adrian, I was wondering if you might consider adding SwinxyZoom – http://swinxyapps.com/pages/apps/swinxy-zoom/index.html to this great list of JS effects.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters