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!
35 Comments on "jQuery Image Resize Plugin"
I know little about what you write. Is it about program?
Hey Greg. after dizzying all around by this problem on my gallery page design. I found this really useful (I haven’t finish implement it yet) but I’m sure it’ll solve my problem here quickly…
Thanks Greg
Hi Greg, useful plugin. I’m really interested in resizing some images for my new widget ( articles similaires – will display similar posts and their thumbnails in the sidebar widget, much lighter than similar posts) – and you see, there is the code php to resize images.
Uses all three parameters as yours but a cache as well to save a bandwidth. Will mail you the final code as soon as it’s done . You might do something more with that resizer.
best regards,
serge
Hi Greg,
Thanks for this, this was very useful. I have used this and modified it a bit to add a tooltip on any resized images with a link to display the original image.
I have submitted my modified plugin to JQuery plugins. I hope you don’t mind. I have put a link to this post in there saying that I am using the code from you.
http://plugins.jquery.com/project/ImageScale
Hi @Harshal, sure i don’t mind, thanks for linking back to the blog.
Thank you very much, this code works very well.
ONe thing you’d may like to include is the microsoft property:
img {
-ms-interpolation-mode : bicubic;
}
This will make IE7 render it smoothly!
@Alex thanks for the tip.
I always like resizing plug in.. but the thing that is ALWAYS missing is a little sharpen.. in php it’s simple to do, can you implement it in JavaScript ?
a nice one. very useful. thanx
with Safari doesn’t work…
best regards Marco
Hi Greg,
enjoyed your tutorial very much and have customized my gallery using this. Was wondering if it is ok to include an image gallery I have made that includes this plugin in a template selling on themeforest.net?
Best,
Christian
Christian, sure, no problem you can use it anywhere you want, of course i always appreciate a link back to this post, but if not than that’s fine too.
Hi i have an problem with your plugin.
I’m taking image url’s from DB in codebehind and showing in a div.
$(document).ready(function() {
$(“body img”).imageScale({ maxWidth: 700, maxHeight: 700 });
});
I write that code after DIV createad.
when image loading its not resize image.
But after i refresh page its resize image bec image is loaded before.
i started to use this. very useful.
Any online example please ?
Hi Greg, great script!
I have modified a bit if don’t mind.
please check this link
http://sandbox.devi.web.id/resizeImg
tested under Windows XP with:
- Firefox 3.6.10
- Safari 5.0.1
- IE6
- Opera 10.61
- Google Chrome 6.0.472.59
Hi Greg.what a great code!
How to do if I want trigger the event when the brower’s size is changed? Thanks.
Best Regards
@lucas try:
$(window).resize(function() {
$(“.shrink-me”).resize({maxHeight: 150});
});
This is one of the best resize jQuery plugin I have tested so far… Thank you for the good work…
Hi, I’d like to use your plugin on my website, but I can’t find what licence are you using. This is for me quite an issue so if you could included some licence or terms of use it would be great.
Thanks.
@Stepan, i do not have any license for it, but feel free to use it in any commercial project without attribution.
So, that’s probably MIT license
Thanks, you were helplful
.
Can’t make it work, why don’t you put a demo or the full code ? I’m a total noob when I load the plugin and i add the following code to my page nothing happens :
$(document).ready(function () {
$(“.my_div_with_img_to_resize”).resize({maxHeight: 150});
}
@Eric, aside of adding the code you need to load the plugin http://ditio.net/wp-content/uploads/2010/01/jquery-resize.js in HEAD section of your HTML document.
Great script Greg – thanks a lot!
Just thought I would add this in-case anyone else is having the same problem:
I found none of my images would appear. On inspecting the generated code they were having their width and height set to 0. I ran it down to the DOM loading before the images, so they didn’t have naturalWidth/Height when the script looked. I solved the problem by moving the initialiser into a window.load call instead of document.ready. Now working like a charm.
There may be a better way around this, but it worked for me.
@Phil great, thanks for the comment!
I am trying using this script but since I am also using other jquery plugins that uses Prototype.js so I receive the error
$(“.profile_img_210″) is null
Could any one please guide how to overcome this issue.
Finally something that works perfect. Thank you
thanks for post image Resize, i very helpfull for me.
Hi
it give me an error:
TypeError: Result of expression ‘this.tagName’ [undefined] is not an object.
Hi Greg,
Any ideas why the class has some positioning issues? I’ve looked in your .js code and found nothing that even mentions display type or positioning. Here are the problems I’ve run into and I’ve tried numerous CSS attributes to try to fix these issues.
Here is the HTML that does scale my image:
The wrapper “projectImg” displays as a ‘block-inline’ next to a left vertical nav bar.
I’m trying to create a thumbnail navigation that sits just below the scaling image.
I’ve tried numerous ways of nesting the main image and the thumbnail nav into a wrapper div but something about the scaling code is whigging it out.
Any ideas why I am having trouble
1) nesting the first wrapper inside another wrapper?
2) when only nested in one wrapper, the positioning is very strange i.e. it pushes it way down the page.
3) I cannot seem to control any div that sits below the scaling div. Everything seems to get forced to the left margin wheras the same div without the scaling code behaves just fine.
It’s as if it is acting like it has absolute positioning – but the main reason I wanted to use your code is so I could place a div relative to the scaling div.
Any help would be greatly appreciated!
Best,
-k
Hi everybody…
This plugin is great. It´s easy integrate to my web project; but I have one question. In Safari it doesn´t load the image. Somebody could help me with that?
Thank so much and excuse my english.
A lot of regards from Spain
Hey don´t answer my last post. Finally I get it. I can see the image on Safari.
Bye…
Hi.. Greg, thanks for your post. But when resized a large image it get blurred. What i need to do? Is there any other plugin needed to install??
Great little plugin, man. Just worked it into a WP header file for a friend and it’s resizing post images beautifully.