Widgets are always fun! jQuery helps craft cute and colorful plugins that come handy. I had stumbled upon various useful and attractive jQuery widgets. So here I am sharing a collection of colorful and handy jQuery widgets that range from sticky notes, galleries, text enhancers and much more.

1. TopUp jQuery Plugin

TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI
driven in order to maintain cross-browser compatibility and compactness.

2. Background Image Tweening With jQuery

A tiny and easy to use unobtrusive element background changer, that keeps your DOM clean and your transitions smooth.

3. Awesome Animated Portfolio Gallery with jQuery and CSS3

Learn how to showcase your potfolio in style with this tutorial. This tutorial walks through the creation of a gallery with ultimate animations, smooth transitions
and elegant navigation. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can
be enlarged by clicking on it, making it appear as an overlay. The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the
headin

4. jQuery Masonry

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.

5. Sponsor Flip Wall With jQuery and CSS

An attractive plugin to showcase data in a grid. The thumbnails in theg rid flip over to reveal further infor on clicking them. Designing and coding a sponsors page
is part of the developers life (at least the lucky developer?s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other
pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other

6. ProtFlow jQuery Coverflow

ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image
reflections stuff! It is simply amazing, just scroll over the images to see them flowing down.

7. Simpletip jQuery Tooltip

Enjoy the beauty of cool and sleek tooltips with colorful background with the Simpletip jQuery plugin. Simpletip is a plugin for the popular jQuery JavaScript
library. It allows you to create tooltips with ease on any element on the page using the power of jQuery selectors and event management. The tooltips can be static,
dynamic, or even loaded through AJAX with a variety of different visual effects. There are many other ways of using this tool than the demos provided here. It is
importan

8. jQuery panelGallery

panelGallery is a free jQuery plugin, distributed under the Creative Commons Attribution 2.5 License, which means that you are free to use and modify it for any
purpose.

9. Fly Off Page with jQuery

So, here is a new jQuery plugin, it is called Fly Off Page. It will take selected elements and make them fly (not literally) off the page in a random or pre-defined
direction. Customizable options include duration (of the animation), direction, tween (extend animation) and retainSpace which allows you to retain, disregard or
animate-out the space that the specified element once took up.

10. jQuery SpryMap

SpryMap is a super lightweight, dependency free Javascript widget that turns any HTML element into a Google Maps-like click and drag window. I have taken the
theory behind my jQuery click and drag map here and souped it up, making it better in every way.

11. AJAX-enabled Sticky Notes With PHP and jQuery

This is an AJAX-enabled Sticky Note management system. It will give visitors the ability to create notes with a live preview, and move them around on the screen.
Every movement is going to be sent to the back-end via AJAX and saved in the database. All the sticky notes will be saved on the server using AJAX.

12. YoxView

YoxView is a free Lightbox-type media and image viewer jQuery plugin. It is easy to use and feature-rich. This is a ultra cool image viewer. Displays images in a
clickable thumbnail grid and loads focused images in a stylish manner.

13. Colorful Sliders With jQuery and CSS3

In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques
presented here ? for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

14. Sliderman Js

Sliderman.js is a standalone javascript library for sliding images. The main feature of Sliderman.js is multiple unique effects which can be combined together.
Sliderman is a great plugin for showcasing your images in classical style. It is really a great joy to witness Sliderman. Indluge in the beauty of the varying
transitions, slides and magical image rollovers with Sliderman.

15. Lettering JS

Letterings is a jQuery plugin for radical web typography. Web type is exploding all over the web but CSS currently does not offer complete down-to-the-letter
control. So we created a jQuery plugin to give you that control. Add a splash of colorful joy to your website with letterings.

16. jQuery Spritely

jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It is a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. You can use it on any html web page, and any part of the page can interact with a sprite.

So, here is a new jQuery plugin, it is called Fly Off Page. It will take selected elements and make them fly (not literally) off the page in a random or pre-defined
direction. Customizable options include duration (of the animation), direction, tween (extend animation) and retainSpace which allows you to retain, disregard or
animate-out the space that the specified element once took up.

Web Site
Demo
Download

Spritely has the following advantages:

• Works well on iPhone/iPod Touch/iPad – check out this page on an iPhone.
• It has been tested successfully on all the major browsers – even Internet Explorer 6
• Great alternative to Flash if your desired platform does not support it.
• It is light-weight so you can do fill the whole window with movement without draining bandwidth.
• Animated objects can also fly above the text of a web page, or you could animate a background, without affecting other elements on the page.

Web Site
Demo
Download

jQuery smart 3D provides a set of interesting effects that can be used to design interactive websites. Use them on site headers to create appealing websites. It is very simple to use as several layers glued together into a 3D effect. This plugin provides a lot of opions to customize the behavior.

Web Site
Demo
Download

An awesome illustration of 3D Levitation effect sing jQuery. Create attractive 3D levitation using this as an inspiration. Tweak the plugin to create your own varities of levitation using jQuery.

PS: This website may take some time to load, so please be patient

Web Site
Demo
Download

I have just finished a jQuery extension which adds support for modifying and animating CSS3 transformations in 2D and 3D. This was based on the 2D transform monkey-patch by Zachary Johnson. I needed this for a project I am working on which specifically targets Webkit (tablet devices), but I am releasing the code under the existing MIT license for anyone to use as they wish. I have put together a little demo to show how it can be used. This demo has been tested on Safari and Chrome, in Firefox you will likely only see the 2D transformations, I have not tried IE.

Web Site
Demo
Download

Bubbles are one of the most interactive user interface elements. Create animated popup bubbles, dialogs and bubble tips in jQuery with these wonderful collection of jQuery Bubble plugins. Leave a bubbly impression on users with these set of bubbly jQuery plugins.

1. Create a jQuery Popup Bubble

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

2. qTip

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.

3. Interactive pop-up bubbles with jQuery and CSS

Move beyond pure CSS with special visual effects courtesy of jQuery. Adding sparkle to your web design is much easier than it was previously, and helps draw users into your content. jQuery takes away all the nasty cross-browser compatibility problems that are often associated with coding JavaScript interactive visual effects and interactions. When you roll over the primary buttons a balloon puffs up into view. When you mouse off the button the balloon puffs out of existence

4. Side Navigation Tooltip or Popup Bubble

Side Navigation Tooltip or Popup Bubble is a tooltip or popup bubble using jQuery.

5. jQuery Popup Bubble

The jQuery Popup Bubble plugin allows you to create easily smart bubble popups with only a line of code in jQuery.

6. Bubble – jQuery Plugin

This plugin adds bubbling functionality to jQuery. The code is similar to jQuery.fn.triggers because it is meant to extend it. It also generates it is own event object, that will remain untouched through the bubbling, meaning it is safe to attach attributes to it and grab them with the ancestors while the event bubbles up.

7. Simple jQuery slideshow bubble messages

A straight forward tutorial on the creation of simple jQuery slideshow bubble messages.

8. jQuery popup bubble extension

Here is a quick and extensible framework to enable popup windows, popup bubbles, or popup anything. Currently the framework does not create extra DOM elements or style anything differently. It relies on the developer to create the DOM element that will be the popup bubble (or whatever). This extension give you the flexibility to bind any number of events to show or hide the bubble. It also supports having the bubble hide on a timer and comes with a complete event model allowing you to intercept

9. Coda Bubble Plugin

Coda Bubble Plugin is based on the great coda popup bubbles tutorial from jQuery for designers. This Coda Bubble Plugin allows you to create wonderful bubbles in jQuery as well as control the distances between them.

10. bubbletip- A jQuery Coda-style bubble tooltip plugin

Create cute bubbly bobble tips in jQuery with this simple jQuery bubbletip plugin! bubbletip is a jQuery Coda-style bubble tooltip plugin.

11. Coda Popup Bubbles

Coda is one of the new web development tools for the Mac – and it is popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design. Learn how to create Coda popup bubbles in jQuery with this simple tutorial.

12. Learning jQuery: Your First jQuery Plugin BubbleUP

There are many posts available detailing how to write your own jQuery plugin. It will not take long before you realize that building in jQuery is very simple. Continuing in our jQuery Learning Series, here we are going to build your first jQuery plugin. It will generate a bubble effect for your menu list and we are going to call it BubbleUP. BubbleUP is a fun and easy plugin to get you started in jQuery. The effect is a nice starting point for learning the basics and many of the steps involved i

13. Image Bubbles effect in jQuery

Image Bubbles is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images. It is a nice way to draw attention to an image when the mouse rolls over it. For images with an alt attribute defined, the script will use it to render a nice tooltip that is shown above the enlarged image. Both the speed and magnification level of the image when it bubbles up can be customized. Cool!

The jQuery Popup Bubble plugin allows you to create easily smart bubble popups with only a line of code in jQuery.

Web Site
Demo
Download

This plugin adds bubbling functionality to jQuery. The code is similar to jQuery.fn.triggers because it is meant to extend it. It also generates it is own event object, that will remain untouched through the bubbling, meaning it is safe to attach attributes to it and grab them with the ancestors while the event bubbles up.

Web Site
Demo
Download

A straight forward tutorial on the creation of simple jQuery slideshow bubble messages.

Web Site