40+ jQuery Plugins Improving Your Website Look and Feel

December 4, 2012 · 52 comments

by Lars

jqueryui

Making more and more appealing and interactive user interfaces have been one of the never ending competitions between web designers since html and browsers where in the mid nineties. The competition is there for a reason. The number of website on-line has experienced a nearly exponential growth and you need to stand out to be seen! Actually it is kind if scary if this trend is going to continue… Anyway most of you reading this post is probably agreeing that websites need to be special, look good and have features that is not found everywhere. I believe jQuery is the answer today just as Flash was 5 years ago. With simple steps and limited programmer skills jQuery will allow you to add goodies to your website you wouldn’t even allow yourself to dream about! This post is listing a lot of really cool jQuery plugins you can simply download and setup to impress your visitors!


ElegantThemes
ThemeForest

Advertisement

PrettyPhoto Media

prettyphoto-media

This plugin can display videos, photos and other media utilizing stunning photos in a fancy overlay. It is a simple plugin to conveniently add prettyPhoto lightbox / modal overlay functionality to your WordPress posts and pages.

qTip

jqueryui

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.

Tab SlideOut

jqueryui


Create a side tab that expands content for a feedback form or contact info. Make your own image to use as a tab and apply this plugin to any div to hide the content off the right side of the screen, It animates to show the content, when the handle/tab is clicked.

Toolkit with 6 Awesome jQuery User Interface components

jquery-tools-lib

This is a great set of jQuery UI Tools. The effort used to present these tools on-line and document them is amazing. Its all in a single JavaScript file weighs only 5.72 Kb.

“The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.”

Documentation of the jQuery Tools library is good and way above what you would expect from a free set of jQuery plugins.

jQuery Confirm Plugin

jqueryui

This plugin displays a confirmation message in place before doing an action. It does not require adding any extra code apart from a call to the plugin itself. One call to $(element).confirm() will do the magic. Also, this plugin does not require you to provide a callback function; it figures it out on its own. Demo Download

Create a jQuery Popup Bubble

jqueryui

Learn how to add a cool popup bubble to an RSS feed link using jQuery. Demo

Horizontal Slide Nav Using jQuery & CSS

jqueryui
Learn to create a spectacular sliding navigation whose animation is triggered when the user hovers over a navigation item. Demo

SimpleModal

jqueryui

This jQuery plugin is a flexible and straightforward way of providing modal window functionality on your site.

Image Overlay Plugin

jqueryui

The Image Overlay Plugin lets you present more information about your images. Hovering over an image reveals associated text on top of it.

jQuery Corner

jqueryui

It s important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div “strips” to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item. So if you step back and look at the cornered element, think of there being solid colored divs hiding the true squared off corners of the item you wish to be changed. This helps you understand the inherent limitations of this small plugin. It s best suited for rounding off block-level elements (divs, paragraphs, etc) and may present more challenges when trying to round off inline elements (spans, anchors, etc). Demo Download

AutoCompleter Tutorial – jQuery(Ajax) PHP MySQL

jqueryui

I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here). Demo Download

SlideBox

jqueryui

Do you need a sliding div panel at the top (or bottom) of web pages that can contain more links or your login/sign-in feature? Check out SlideBox.

Build a Better Tooltip with jQuery Awesomeness

jqueryui

This tutorial will show you a method for replacing the built-in browser tooltips that appear on elements such as images and links with title attributes.

Using jQuery Slider to Scroll a Div

jqueryui

Todays tutorial is going to show how to create a horizontally scrolling div using jQuery, html, and css. The main part of this tutorial is going to focus on the jQuery which is used to build the slider which controls the scrolling. One of the first questions that is going to pop into your head is, “why?”. Well the main reason to do this is to be able to build a custom scroll bar/slider. You can also introduce extra functionality using the jQuery slider. Demo Download

BeautyTips

jqueryui

The plugin creates rollover balloon-help style tooltips for any element on your page. While there were a few different tool tips plugins that existed for jQuery, none of them seemed to quite meet my need for a NetFlix (or Google Maps) style talk-balloon popup. Demo Download

jQDialog

jqueryui

jQDialog is a jQuery plugin for exhibiting unobtrusive modal windows for in-page notifications that can replace the alert(), prompt(), and confirm() JavaScript functions.

Panel Gallery

jqueryui

Panel Gallery is an image slideshow with a unique transitional effect. It transitions to another image in a sequential panel manner.

Creating a Floating HTML Menu Using jQuery and CSS

jqueryui

This jQuery-based navigation menu tutorial will show you how to create a menu that follows you up and down the page as you scroll.

Simple jQuery Modal Window Tutorial

jqueryui

This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.

Columnize

jqueryui

Columnize creates a newspaper-like column layout. The original HTML code only needs small adaptions. In most cases, it is not necessary to adapt the HTML code at all.

Smart Tooltips with jQuery

jqueryui

This tooltip technique will check whether a link has a title attribute or not, and if it doesn’t, it skips it title.

Facebook Style Alert Confirm Box with jQuery and CSS

jqueryui

I received a request from my reader that asked to me how to implement facebook style alert box. So I had designed Facebook Style Alert Confirm Box with jquery plug-in jquery.alert.js. It is simple just changing some lines of CSS code. Demo Download

ColorBox

jqueryui

ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3. Demo Download

Improving Search Boxes with jQuery

jqueryui

Create search boxes that are highlighted when the user focuses on them by following along this excellent jQuery tutorial.

Jquery Fade In-Fade Out

jqueryui

Hi there in this tutorial il show you some simple effects you can use to spice up your websites using jquery. Your probably thinking oh no not another coding language ive got to learn. Dont worry its real simple to use and implement. Demo Download

jQuery Iconize

jqueryui

jQuery Iconize allows you to reduce or expand page elements into an “icon state”, providing your web app a user-friendly way of minimizing page objects.

Create Sliding Image Caption with jQuery

jqueryui

This image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it.

PikaChoose

jqueryui

PikaChoose is a super lightweight image gallery that’s a cinch to integrate into your website. You can see it in action on the Belvedere Inc website.

Favorite Rating with jQuery and Ajax

jqueryui

I received a mail from my reader that asked to me how to implement Show the love rating system like amypink.com. So I had designed Favorite Rating with jQuery and Ajax.. It is very simple, just changing little code on my old post Voting system with jQuery, Ajax and PHP. Demo Download

Growl

jqueryui

Growl allows you to present DOM-inserted elements (divs by default) that are perfect for user warnings, messages, and status update notifications.

Simple jQuery Image Slide Show with Semi-Transparent Caption

jqueryui

In this tutorial, you’ll learn about the concept of tweaking opacity of elements, as well as using the setInterval function to delay the firing off of another function.

Easy Image Gallery

jqueryui

Creating image thumbnail galleries is a snap when you implement the Easy Image Gallery jQuery plugin into your site’s template.

Boxy – Facebook-like Dialog Overlay With Frills

jqueryui

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I have seen by providing an object interface to control dialogs after they have been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user. Demo Download

Image Reveal using jQuery

jqueryui

This quick and easy tutorial shows you the concept of hiding and showing elements by watching out for window events (in this instance – mouse hovers).

jQuery Text Resizer

jqueryui

The Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. A lot of us have visited sites, particularly news websites, where the user is given the option to enlarge or decrease the size of the website’s text. This is especially useful for sites where it is expected that older visitors will make use of the site.

PfeLoader

jqueryui

This jQuery plugin allows you to display a progress bar for page components that are being downloaded – useful for image galleries that share large-scale photos.

nyromModal

jqueryui

nyromModal is a useful jQuery plugin that has a robust set of features and options for you to truly create a customized modal window for your web pages.

Quovolver

jqueryui

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

Mouse Over Animation for Text

jqueryui

MOAText is a spiffy jQuery plugin for giving you the ability to animate HTML text triggered when the mouse cursor hovers over them.

How to create a stunning and smooth popup using jQuery

jqueryui

In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like <a>). The tutorial will also show you how you can deal with keypress events so that you can incorporate keyboard shortcuts into your interface.

DragScrollable

jqueryui

Scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging. Can be used to build a similar effect as in Google maps where you drag contents of a div acting as a viewport.

Twit

jqueryui

Twit is a jQuery Plugin to Display Twitter Tweets on a Blog.

jParallax

jqueryui

jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way. Demo Download

Uploadify

jqueryui

Uploadify is a package written on top of jQuery that gives you both the client-side and server-side functionality you’ll need to handle single-file and multi-file uploads.

jLoupe

jqueryui

jLoupe adds a “loupe” or “magnifying glass” effect to images. Applying the plugin is as easy as adding the class “jLoupe” to the images you want to enable the effect on. There are several ways to enable the zoom behavior depending on how you are loading the images on your page. The best way is to simply scale a large image using the html attribute “width” or “height”. But if you are displaying a gallery of small thumbnails, you can apply jLoupe by adding the URI of the larger image to the “longdesc” attribute to your image tag.

Tip! JavaScriptBank.com: provide thousands of free JavaScript codes, free JavaScript tutorials, free JavaScript training videos

Complete mcp and ccna certification passing guarantee by actual test exam material.

{ 26 comments… read them below or add one }

http://adhocspace.com/list-a-rental-space July 19, 2013 at 5:00 pm

I really like what you guys are up too. Such clever work and
reporting! Keep up the awesome works guys I’ve added you guys to blogroll.

Reply

seo fusevision May 7, 2013 at 8:37 am

Pretty section of content. I just stumbled upon your web site and in accession capital to assert that I acquire in fact loved account your
weblog posts. Any way I’ll be subscribing to your feeds and even I achievement you access constantly quickly.

Reply

Benny January 22, 2012 at 10:52 pm

a very nice list. thank for that!

Reply

Dipak September 6, 2011 at 2:48 pm

Awesome collection thanks for share

Reply

freelance web designer kerala June 16, 2011 at 8:18 am

Thanks…Excellent..Post

Reply

web-créativité May 19, 2011 at 10:26 am

Thank you for the nice collection. Excellent list, thanks for sharing!

Reply

cheap custom jerseys May 19, 2011 at 9:26 am

jQuery Plugins Improving Your Website Look and Feel

Reply

Shaneka Landell March 13, 2011 at 7:14 pm

Very nice collection, so tempting to use them , but I want to stay away from the JavaScript want to practice good SEO techniques

Reply

michael December 31, 2010 at 11:26 am

Thank you for the nice collection. Excellent list, thanks for sharing!

Reply

Lars January 1, 2011 at 8:30 pm

You welcome! happy New Year!

Reply

Web Design Leeds December 26, 2010 at 1:56 pm

Excellent list! jQuery is an easy way to take a site to the next level in functionality and wow power.

Reply

weather station December 12, 2010 at 1:59 pm

The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post.thanks

Reply

passguide October 10, 2010 at 1:32 am

thanks forshare

Reply

Theo April 10, 2010 at 6:36 pm

Great jQuery collection !

Thanks for sharing !

Reply

Deborah Jones February 26, 2010 at 3:54 pm

An additional tool for the list is Likno Web Modal Windows Builder
http://www.likno.com/jquery-modal-windows/index.php

Hope this helps!

Reply

wespai December 17, 2009 at 9:51 am

thx collection some

Reply

Guilherme Moreira December 11, 2009 at 3:41 pm

Awesome!

Thanks for the resources, bro! I just loved the twit plugin!

Reply

ajaxg December 10, 2009 at 9:41 am
Adam Hermsdorfer December 8, 2009 at 12:59 am

Good list. I’m a huge jQuery fan as well.

Reply

neel December 7, 2009 at 6:52 pm

Excellent collection of cool jquery scripts. I will definitely try some of them in my next projects

Reply

tripwiremag December 7, 2009 at 8:24 pm

@neel; great to hear from you! Glad you liked the post ;)

Reply

Luis Lopez G. December 6, 2009 at 3:57 am

Very Impressive, I Like Jquery and probably implement some of these on my blog.

Reply

Alex Flueras December 5, 2009 at 7:28 am

Really useful collection. Thanks for sharing.

Reply

Tim December 4, 2009 at 11:41 pm

Here’s a better version of the Growl plugin, it’s called Gritter:
http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/

Reply

Russ Adams December 4, 2009 at 3:27 pm

Excellent list! jQuery is an easy way to take a site to the next level in functionality and wow power.

Reply

Brian Jones December 4, 2009 at 2:26 pm

Thank you for the nice collection. I am just about to start learning jQuery / Ajax and Javascript and these will be very useful.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 26 trackbacks }

Previous post:

Next post:


Web Analytics