10 Very Attractive jQuery Widgets

Sam Deering
Tweet

10 Useful and very attractive jQuery Widgets and Plugins that do various things. In this post, I have collected a set of 10 very attractive jQuery widgets that range from smart image galleries, text enhancers, snicky notes, image tweens and more. Enjoy!

Related posts:


1. jQuery Masonry


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.
jQuery-Masonry.jpg
Source


2. Sponsor Flip Wall With jQuery and CSS


An attractive plugin to showcase data in a grid. The thumbnails in the grid flip over to reveal further info on clicking them.
Sponsor-Flip-Wall-With-jQuery-and-CSS.jpg
Source


3. Fly Off Page with jQuery


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 retain space which allows you to retain, disregard or animate-out the space that the specified element once took up.
Fly-Off-Page-with-jQuery1.jpg
Source


4. jQuery SpryMap


A super lightweight, dependency free JavaScript widget that turns any HTML element into a Google Maps-like click and drag window.
jQuery-SpryMap.jpg
Source


5. Sliderman Js


A standalone JavaScript library for sliding images. The main feature of Sliderman.js is multiple unique effects which can be combined together.
Sliderman-Js.jpg
Source


6. TopUp jQuery Plugin


TopUp offers the following advantages:
> TopUp is absolutely free, also for commercial use
> Auto-correction of size and position when required
> TopUp can be used along with Prototype
> Cross-browser compatibility
> Fancy layouts, animations and transitions
TopUp-jQuery-Plugin.jpg
Source


7. Background Image Tweening with jQuery


A tiny and easy to use unobtrusive element background changer, which keeps your DOM clean and your transitions smooth.
Background-Image-Tweening-with-jQuery.jpg
Source


8. AJAX-enabled Sticky Notes with PHP and jQuery


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.
AJAX-enabled-Sticky-Notes-with-PHP-and-jQuery.jpg
Source


9. 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.
Colorful-Sliders-With-jQuery-and-CSS3.jpg
Source


10. jQuery panelGallery


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.
jQuery-panelGallery.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.