10 jQuery plugins for manipulating images

March 5, 2009 by admin · 3 Comments
Filed under: Effects, jQuery 

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
Dependencies jQuery 1.2.3 +
Size Less than 2KB
Restrictions None
Compatible Browsers IE 6+,Firefox 1.5+, Opera 9+, Safari 2+, Camino and Google Chrome
Demo & Downlod Open | 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
Dependencies jQuery 1.2.6 +
Size Less than 9KB
Restrictions None (GPL)
Compatible Browsers Firefox 2+, Opera 9+, IE6+, Safari 2+, Google Chrome
Demo Open | 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).

Dependencies jQuery 1.2.6 +
Size Less than 3KB (Uncompressed)
Restrictions None
Demo & Download Open | 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
Dependencies jQuery 1.2.6 +
Size 10KB (Compressed)
Restrictions None (MIT)
Compatible Browsers Firefox 3, Opera 9.5, IE6+, Safari 3, Google Chrome
Demo Open | 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
Dependencies jQuery 1.2.6 +
Size 11KB (Minified)
Restrictions None (Dual Licensed GPL + MIT)
Demo Open | 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.

Dependencies jQuery 1.2.3 +
Size Less than 3KB (Uncompressed)
Restrictions None
Demo & Download Open | 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
Dependencies jQuery 1.2.3 +
Size Less than 7KB (Uncompressed)
Restrictions None (GPL)
Demo & Download Open | 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.

Dependencies jQuery 1.2.3 +
Size Less than 10KB including all supported scripts
Restrictions None (GPL)
Demo & Download Open | Open in new window
Info & Download Open

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.

Dependencies jQuery 1.2.6 +
Size Less than 8KB (Compressed)
Restrictions None (GPL + MIT)
Demo & Download Open | 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.

Dependencies jQuery 1.2.1 +
Size Less than 10KB (Compressed)
Restrictions None (GPL + MIT)
Demo & Download Open | Open in new window

Related posts:

  1. 3 jQuery plugins to show context menu
  2. 10 jQuery plugins for showing image gallery
  3. jQuery plugins to show data in table format or chart format
  4. Three jQuery modal plugins to repace alert and confirm
  5. Which is the best lightbox clone for jQuery ?

If you like this post, please share it so that others can also find this

Comments

3 Responses to “10 jQuery plugins for manipulating images”
  1. Benjamin says:

    I used JQZoom for some of my projects, but the 1000 lines of code weren’t easy to adjust to my own needs. So I created BeZoom, another image magnifier, that’s lightweight and easy to use. It’s located at http://benjaminmock.de/bezoom-jquery-plugin/

  2. Sven says:

    Jet there is an other image zoom interface with jquery for high resolution images! http://www.ajax-zoom.com

Trackbacks

Check out what others are saying about this post...
  1. [...] This post was Twitted by robrizzy [...]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!