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

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.