Twitter
Google
Tumblr
Last.fm
LinkedIn
Digg
RSSjQuery Image Resize Plugin v2.0
Jun 25
jQuery Image Resize Plugin 29 Comments
I found out there was already a jQuery plugin called ‘resize’ so I renamed my plugin to .aeImageResize
I also have included a better minified version of the plugin.
You can download the latest version from here
Jun 26, 2010 @ 08:06:54
Great work! Tnx!
Jul 14, 2010 @ 01:00:11
How would you alter the code (which is wonderfully fast) to center the image in the box defined by the max width and max height? I’ve tried with a jquery .css call and it doesn’t work (for me, at least).
Jul 14, 2010 @ 09:12:15
The plugin doesn’t create a box but the simplest possible way of doing it will be:
<!-- between <head> and </head> --><style>
.imgbox{display:block;text-align:center}
</style>
<!-- add around images being resized in <body> -->
<span class=imgbox><img src="sample.jpg" height=250 width=250></span>
Aug 11, 2010 @ 16:16:56
I realy like your plugin but i can’t get it to work in safari 5 an the MAC (it works in other brwosers). Do you have any sugestions how i could fix this.
Thx
Aug 12, 2010 @ 23:37:26
Hi,
Can you give the latest version a try (v2.0.2). It can be downloaded from: http://github.com/adeelejaz/jquery-image-resize/downloads
Also, can you please check that you are specifying height and with attributes in the image tag:
<img src="sample.jpg" height=250 width=250>Aug 17, 2010 @ 14:05:31
Excellent plug-in although I noticed a small bug: It will only resize with the correct aspect ratio if I either:
(a) don’t specifiy a width and height in the image tag,
or
(b) specify a width and height in the image tag that is also of the same aspect ratio as the resize I’m requesting.
This is unfortunate, as it means a large image that you want reduced will still be displayed large if javascript is turned off.
Thanks
Aug 17, 2010 @ 14:26:48
Thanks for your input and really interesting find.. I have a potential fix in mind.. I’ll upload a new version tonight.
Aug 20, 2010 @ 15:45:32
Hi Adeel, I’m eagerly awaiting that fix! Any luck?
Aug 20, 2010 @ 23:33:49
Hi Ian,
Yes, I have fixed the issue. Please download the latest version (v2.0.4) from here:
http://github.com/adeelejaz/jquery-image-resize/downloads
Aug 24, 2010 @ 16:50:29
Hi Adeel,
Thanks it’s working a lot better now!
One bug I noticed though: If I have a source image of size: 120×90
and I want to resize it to 120×72, it will keep it at 120×90 and not resize it.
I think this problem occurs when the new width is the same as the original width, but the new height is different.
Aug 25, 2010 @ 00:36:47
Hi Ian,
I always thought the bounding box will be a square but I’ve updated the code. Try the latest version (v2.0.5) from here:
http://github.com/adeelejaz/jquery-image-resize/downloads
Aug 25, 2010 @ 16:11:59
Awesome. It works a treat, cheers
Sep 08, 2010 @ 12:27:36
@Adeel Ejaz : I go an issue ….. I am loading images into a DIV with ajax now inside the dive i am populating images which belongs to that use so using php for that now i included jquery … your plugin and initiated it as its shown in your recent version example.html but the problem is it wont resize …… i tried to call that file which i call from ajax directly into the browser and it worked perfect that means there is some kind of missing function or i am doing something wrong to populate it inside the div….. any help ?
Sep 08, 2010 @ 15:39:02
Are you using jQuery for AJAX? If yes, then you will need to call the aeImageResize function from within the AJAX success function. It would be something like:
$.ajax({url: 'ajax.php',
success: function(data) {
$('img').aeImageResize();
}
});
If you can show me an example code, I can help you further. You can use the contact form to email me if you do not want it to be public.
Sep 10, 2010 @ 09:35:11
thanks for your reply….
actually what i am doing is here
HTML :
art
$(document).ready(function(){
$(“#art”).click(function(){
$(“#response”).load(“art.php”);
});
});
now when i click on art then the images belonging to the person who is in session loads in side the response div and i included the javascript file inside the div and initiating your function also inside the div but it wont resize the images ….. but when i call art.php directly from browser it works perfectly ? any suggestions …
Sep 10, 2010 @ 12:09:03
The function assumes that the image has already been loaded so try the following:
$(document).ready(function(){$('#art').click(function(){
$('#response').load('art.php', function() {
$('#response img').aeImageResize();
});
});
});
Oct 14, 2010 @ 10:08:31
Resizes in Firefox, but leaves ‘jaggies’
Looks good in IE, Chrome
Anyway of getting better image quality in Firefox?
Great solution otherwise
Thanks
Andy
Oct 15, 2010 @ 14:01:50
Hi Andy,
Can you please email me a screenshot of the issue and the version of Firefox at: [email protected] and I’ll see what I can do.
Thanks
Oct 21, 2010 @ 15:10:33
Hi Adeel
Did you manage to fix the Firefox issue with jQuery Image Resize Plugin v2.0
?
I emailed you the scree grabs.
Thanks
Andy
Oct 25, 2010 @ 12:32:34
Hi Andy,
Yes, I did have a look at it and it seems the issue is the way Firefox resizes the images (http://stackoverflow.com/questions/388492/firefox-blurs-an-image-when-scaled-through-css-or-inline-style).
Can you please add the following CSS to the resized images and see if this works? (If it does, please let me know so I’ll at it in the next version release).
image-rendering: -moz-crisp-edges;
Oct 22, 2010 @ 00:05:00
Great plugin!
I downloaded the plugin linked directly from the jQuery plugin site (not sure what version it is) and it works well.
However I downloaded the latest version (2.0.5) that you list on GitHub and it’s not working for me when I only pass in the width as a parameter, e.g.:
$(“.resizeme”).aeImageResize({width: 250});
Any idea why it doesn’t resize when only one dimension is passed vs. the older version that works from the jQuery site?
Also, just a suggestion — you might want to include the version # as a comment within the downloaded source
Thanks again!
Brian
Oct 25, 2010 @ 12:34:26
Thanks for reporting the issue Brian, I think I know why the plugin has stopped working in the latest version. I’ll release a fix soon (somewhere today!)
PS: Thanks for the suggestion about the version comment in the code, will get it done as well.
Oct 26, 2010 @ 16:55:22
Hey there Adeel. Any update on that fix?
I was able to get the latest version to work by reversing the (imgAspectRatio > aspectRatio) to (aspectRatio > imgAspectRatio), but not sure if that causes other issues outside of my usage.
Any help would be appreciated
Nov 01, 2010 @ 01:58:49
Sorry for taking time on this but there was a nasty IE6 bug that was taking a while to fix. And yea, that fix would have all sort of issues. But the good part is I’ve spent my weekend on this and put a fix out. Check it out here: http://adeelejaz.com/blog/jquery-image-resize-plugin-v2-1/
Jan 14, 2011 @ 03:39:17
Have you seen shadowbox, the javascript image viewer? In shadowbox an image is resized live as the window is resized. Is that what this script does? I’m looking for a plugin that will dynamically resize an image live, as the browser window is resized.
Jan 14, 2011 @ 23:09:31
No, this plugin just resizes on page load or whenever the plugin is called.
May 26, 2011 @ 23:22:49
nice plugin to share… !!! I tink I need it for my new site
Apr 24, 2012 @ 19:45:20
dude. wtf? no demo. not even an explanation of what occurs in your logic!?!
FAIL
Apr 24, 2012 @ 23:00:28
Right, you just randomly land on post about a “new” version of the plugin and call it a “FAIL” without even bothering to have a look around for 2 seconds! If you actually go to the plugin page (http://adeelejaz.com/blog/type/jquery-image-resize-plugin/ or https://github.com/adeelejaz/jquery-image-resize) you can find a lot more detail on what it does. If you “bother” to download it, it also contains a demo and an explanation!