Web Development Magazine

jQuery Image Resize Plugin

Few days ago i wrote jQuery Plugin Tutorial, today i want to give away my first open source jQuery plugin: image resizer. I made sure that it’s compatible with all major browsers: IE6+, FF3, Opera10, Chrome (didn’t check with Safari, hope someone can do it for me).

The whole idea was to make it as simple as possible to resize image to given size. The common problem developers face is to resize image to (for example) no more then 150px width or no more then 75px height and because getting real image size is not as simple as it seems i think you will find this plugin useful.

About JavaScript Image Resizing

Before you download and start using it, keep in mind that depending on what you are trying to accomplish this plugin might not be the best solution for you. If you are trying to save some bandwidth by resizing image then this plugin won’t help you, because resizing is done on the client side, which means that server is sending to client image in the original size.

Image Resize Plugin Usage

Using plugin is as simple as applying it to the img tags:

$(".shrink-me").resize({maxHeight: 150});

This code will resize all images with class “shrink-me” to no more then 150px height.

Plugin accepts three options
1. maxHeight: maximal image height
2. maxWidth: maximal image width
3. scale: (default size=1) scales image.

You can execute plugin with just one or with all params given (actually you can even execute it without any parameter but it won’t do anything). If you execute plugin with all 3 parameters given then, first image will be scaled, then if maxWidth or maxHeight is exceeded image is resized further.

For example if you want to shrink all images to 50% of their original size, but no more then 100px width or 150px height you can write:

$("img").resize({
    scale: 0.5, // 0.5 = 50%
    maxWidth: 100,
    maxHeight: 150
});

Few IMPORTANT things to consider

1. Resizing is done by adding to <img /> tag attributes: height and width. If you need to add them to css as well then you need to do it manually

2. That should go without saying, but just for the record: you can use resize plugin only on <img /> tags.

Download

Download: jQuery image resizer.

Please post your: suggestions, feedback, bugs in comments. Thanks!