10 jQuery plugins for manipulating images

This time, I want to list some jQuery plugins that work with images or manipulate images some how. I didn’t consider scripts for slide shows or image viewer.

You may be also interested in the following posts,

Image Reflection

Image reflection is a common technique that designers use for a visual appeal. This jQuery plugin can create the reflection automatically for images. It is very light & faster because it uses the Canvas object in supported browsers and DirectX filters in Internet Explorer.


Features

  • Light weight (Less than 2KB)
  • Easy to use
  • Customizable
DEPENDENCIESjQuery 1.2.3 +
SIZELess than 2KB
RESTRICTIONSNone
COMPATIBLE BROWSERSIE 6+,Firefox 1.5+, Opera 9+, Safari 2+, Camino and Google Chrome
DEMO & DOWNLODOpen | Open in new window

For a stand alone reflection script, please visit http://cow.neondragon.net/stuff/reflection/

jqZoom – Image magnifier for jQuery

It is a good script to zoom into some part of an image. The idea is to use two images. A smaller image which shows initially and a high resolution copy of that image which will be shown (part of the image corresponding to the mouse position).

Open in new window

DEPENDENCIESjQuery 1.2.6 +
SIZELess than 9KB
RESTRICTIONSNone (GPL)
COMPATIBLE BROWSERSFirefox 2+, Opera 9+, IE6+, Safari 2+, Google Chrome
DEMOOpen | Open in new window
DOWLOAD & INFO

jQPanView

This script is useful if we need to show a high resolution image in a a small area. Using this script, user can pan around the images using a small thumbnail view (like google map).

DEPENDENCIESjQuery 1.2.6 +
SIZELess than 3KB (Uncompressed)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

jCrop – Select an image area

It can be used to draw a selection inside an image. Then this data can be used to crop that image in server side. A very good interface that matches to professional image cropping applications. Probably it is useful in a CMS or for web based image manipulation.

Open in new window

DEPENDENCIESjQuery 1.2.6 +
SIZE10KB (Compressed)
RESTRICTIONSNone (MIT)
COMPATIBLE BROWSERSFirefox 3, Opera 9.5, IE6+, Safari 3, Google Chrome
DEMOOpen | Open in new window
DOWLOAD

imgAreaSelect

This script also serves the same purpose as JCrop but with some more customization options. Lots of examples provided.

Open in new window

DEPENDENCIESjQuery 1.2.6 +
SIZE11KB (Minified)
RESTRICTIONSNone (Dual Licensed GPL + MIT)
DEMOOpen | Open in new window
INFO & DOWLOAD

360 degree panorama

This script creates a 360 degree panoramic view of any objects using an array of images. The script is simple to use. Shoot the photos of the object in all possible angles and give it as an array to the script. The image preloader will load all images. Can be activated in mouse move or click.

DEPENDENCIESjQuery 1.2.3 +
SIZELess than 3KB (Uncompressed)
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Spherical Panorama

It can create a spherical panorama from given images. It will need a lot of images and those are handled well using a good loading animation. All the process are explained well in their site (It is in French, I have given a google translated link).

Google English translation

DEPENDENCIESjQuery 1.2.3 +
SIZELess than 7KB (Uncompressed)
RESTRICTIONSNone (GPL)
DEMO & DOWNLOADOpen | Open in new window
TRANSLATED PAGE IN ENGLISH

jQuery Virtual Tour

This is a good script for creating panoramic views with hot spots. The animation is good and there are controls which pops up on mouse over to control the direction or pause. We only need to give the image and the hotspots can be given using image maps.

DEPENDENCIESjQuery 1.2.3 +
SIZELess than 10KB including all supported scripts
RESTRICTIONSNone (GPL)
DEMO & DOWNLOADOpen | Open in new window
INFO & DOWNLOADOpen

For a more simple panorama viewer (without support for hot spot), please check http://www.openstudio.fr/jquery.panorama/

Image Cube

It is a jQuery plugin that sets a division to rotate between images as if they were on the faces of a cube.

The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.

DEPENDENCIESjQuery 1.2.6 +
SIZELess than 8KB (Compressed)
RESTRICTIONSNone (GPL + MIT)
DEMO & DOWNLOADOpen | Open in new window

jqPuzzle – for creating sliding puzzles

jqPuzzle lets you easily create sliding puzzles for your web page. Select an image, put it in your page, and add some magic – jqPuzzle will automagically turn it into a full-blown sliding puzzle! If you want, you can highly customize and style your sliding puzzle according to your needs. The interface is available in several languages, and you can add your own texts on the fly.

DEPENDENCIESjQuery 1.2.1 +
SIZELess than 10KB (Compressed)
RESTRICTIONSNone (GPL + MIT)
DEMO & DOWNLOADOpen | Open in new window

jQuery seekAttention plugin to get the users attention


The “seekAttention” plugin gracefully get’s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

The definable area (to be called “container” from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you.

This plugin can be useful for web based tutorials or in forms (May be in validation).

DEPENDENCIESjQuery
SIZE5KB (compressed)
RESTRICTIONSNone
DEMO & DOWNLAODOpen | New window

Improved lava lamp effect for jQuery and Mootools

The lava lamp effect was an excellent technique to turn the navigation to a flash like animation. LavaLamp allows you to add nifty background hover effects to HTML lists in combination with the Easing library.

It is available for bot jQuery and Mootools

LavaLamp – Lava lamp for jQuery

  • Horizontal and vertical movement supported
  • Callback support on completion
  • Easing library support – Can use any supported animation
  • Speed can be adjusted
DEPENDENCIESjQuery, Easing plugin
SIZE5 KB (Uncompressed)
RESTRICTIONSNone
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

Don’t forget to checkout the different easing effects (On top of the demo page)

Fancy Menu – Lava lamp for Mootools

DEPENDENCIESMootools (Latest version requires 1.2)
SIZE2KB
RESTRICTIONSNone
DEMO & DOWNLOADOpen | Open in new window

Also, check the Barack Slideshow plugin based on the MorphList plugin for Mootools.

Agile Carousel – Custom carousel with excellent options

Agile Carousel is a jquery plugin which enables you to create a custom carousel with many many different transition & easing options. It has lots of configurable options like customization of controls, timer, easing type, transition type etc. It does not require jQuery UI plugin but it is recommended for excellent transitions of slides.

We need to specify a directory where slides are stored. The slides can be (X)HTML, images or flash.

Features

  • Excellent transition effects
  • Configurable controls
  • Supports HTML, Flash and images

How it works?

The script works a little differently. It posts the configured options to a PHP file using AJAX. The configurable options specify the slide directories, titles and links. The PHP file parses the options and then it scans through the directory(multiple directories are supported).

The downloaded source package contains this PHP file. The PHP script path is hard coded in javascript, so you might need to edit the path there. Also, it is possible to tweak it to work with any server side scripting languages, not just PHP.

DEPENDENCIESjQuery 1.26, jQuery UI library recommended
SIZE16KB (Minified)
RESTRICTIONSNone (New BSD)
DEMOOpen | Open in new window
INFO & DOWNLOADOpen

jGrowl – To show unobtrusive messages

jGrowl is a nice way to show unobtrusive messages or informations to user.

Advantages

  • The default style is good enough
  • The message can be shown for a pre defined time (For eg: 10 seconds and then it will close automatically)
  • Support for sticky messages – which do not close automatically
  • Customizable
DEPENDENCIESjQuery
SIZE5 KB
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

Featured content slider – Auto advancing

Using jQuery Coda plugin, css-tricks.com has created a very good script for a featured content gallery with auto advancing. It can be created with simple html markups.

DEPENDENCIESjQuery, jQuery Easing & Compatibility plugin, jquery Coda plugin
SIZELess than 40KB (All scripts including jQuery compressed)
RESTRICTIONSNone (Free to use on any site)


Suggested Enhancements

Add scroll functionality (carousel functionality) in the thumbnails so that any number of items can be featured.For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download code

jQuery Coda Slider

There are two jQuery plugins to emulate the Coda style. One uses scrollTo plugin and the other uses jQuery easing plugin

1. jQuery Coda Slider

It uses the jQuery scrollTo plugin.

DEPENDENCIESjQuery, jQuery ScrollTo, local Scroll & serial Scroll
SIZE10 KB (with all the requried plugins – excluding jQuery)
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

2. jQuery Coda Slider

It uses jQuery easing plugin for the effects

DEPENDENCIESjQuery, jQuery easing, easing comaptibility
SIZE9 KB (with all the requried plugins – excluding jQuery)
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open Demo | Open demo in new window | Info & Download

Image Flow 0.9

Image flow is inspired by Apple’s cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

Advantages

  • XHTML compliant
  • Keyboard and Mouse scroll wheel navigation supported
  • Free to use on any site
  • No dependencies
  • small in size (Only 11 KB uncompressed)

Specifications

DEPENDENCIESNone
SIZE11KB (Uncompressed)
RESTRICTIONSNone (Free to use on any site)

For demo and download, please check the links

Open | Open in new window 

The above demo opens images in another tab/window. Means no lightbox support. But lightbox support can be integrated. Please check the links below

Open | Open in new window