JavaScript
Article

10 Very Attractive jQuery Widgets

By Sam Deering

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
Meet the author
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.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.