this is a good article i been looking for one like it, but will it work with my jQuery code?

it is possible to make this script resize all the tag in html page automatically ???

I feel like an idiot. I am trying to implement the above so that I can use the .resize-me class. I added the class to my image and included the following in the header:

window.addEvent(’domready’, function(){
$each($$(’IMG.resize-me’), function(imgObj){
var newSize = scaleSize(120, 120, imgObj.width, imgObj.height);
imgObj.width = newSize[0];
imgObj.height = newSize[1];
});
});
function scaleSize(maxW, maxH, currW, currH){
var ratio = currH / currW;
if(currW >= maxW){
currW = maxW;
currH = currW * ratio;
} else if(currH >= maxH){
currH = maxH;
currW = currH / ratio;
}
return [currW, currH];
}

Am I missing something?

this code does not seem to work with portrate images

e.g. scaleSize(80,80,225,300) will result in [120,160]

should be:

scaleSize(120,120,225,300) will result in [120,160]

sorry for the typo.

function scaleSize(maxW, maxH, currW, currH){
var img_ratio = currH / currW;
var box_ratio = maxH /maxW;
if(img_ratio = maxW){
currW = maxW;
currH = currW * img_ratio;
} else if(currH >= maxH){
currH = maxH;
currW = currH / img_ratio;
}
}
else
{
if(currH >= maxH){
currH = maxH;
currW = currH / img_ratio;
} else if(currW >= maxW){
currW = maxW;
currH = currW * img_ratio;
}
}
return [currW, currH];
}

actually there are other corner cases that this logic does not account for.

for example if container box is 100×400, and image is 400×500 then your function will return 320×400.

i found that it’s needed to compare aspect ratio of the image to the aspect ratio of the container box to properly decide which side to constrain by.

something like

function scaleSize(maxW, maxH, currW, currH){
var img_ratio = currH / currW;
var box_ratio = maxH /maxW;
if(img_ratio

Hi, I’m trying to convert this to use jQuery but am not having any luck. Can someone tell me what’s missing?

$(document).ready(function() {
var img = $(’image-landscape’);
var initW = img.width, initH = img.height;

$(’.controls LI A’).each(function(el, i){
$(el).click(function(e){
e = new Event(e).stop();

var newW = img.width, newH = 0;
switch(el.rel){
case ‘zoomOut’:
newW -= 20;
break;
case ‘zoomIn’:
newW += 20;
break;
case ‘resizeProportionally’:
var newSize = scaleSize(200, 200, $(el.rev).width, $(el.rev).height);
$(el.rev).width = newSize[0];
$(el.rev).height = newSize[1];
return;
default:
newW = initW;
}

var ratio = initH / initW;
newH = newW * ratio;

img.width = newW;
img.height = newH;
});
});
});

Here’s what I have so far. I’m able to get the initial width and height now (thanks!) but can’t get the click events to fire.

$(document).ready(function() {
var img = $(’#image-landscape’);
var initW = img.width(), initH = img.height();

$(’.controls LI A’).each(function(el, i){
$(el).click(function(e){
alert(’test’);
e = new Event(e).stop();

var newW = img.width(), newH = 0;
switch(el.rel){
case ‘zoomOut’:
alert(’zoomOut’);
newW -= 20;
break;
case ‘zoomIn’:
alert(’zoomIn’);
newW += 20;
break;
default:
newW = initW;
}

var ratio = initH / initW;
newH = newW * ratio;

img.width() = newW;
img.height() = newH;
});
});
});

-
+
Reset

This looks close to what I am looking for. I need to resize an image width: 507px height: 370px, keeping it centered, depending on the clients resolution. The image needs to scale down depending upon the screen size. Is this possible? Thank you in advance for your help.

hay, its great!thanks Alex.

hey I’m trying to put this code on the blogger for my blog put I can’t save it because it gives me always an error I’ve put on the top this code.

var newSize = scaleSize(200, 200, 500, 313);
alert(’New Width: ‘ + newSize[0] + ‘, New Height: ‘ + newSize[1]);

function scaleSize(maxW, maxH, currW, currH){

var ratio = currH / currW;

if(currW >= maxW && ratio if(currH >= maxH){
currH = maxH;
currW = currH / ratio;
}

return [currW, currH];
}

is this right or not?

thanks in advance!

“} else if(currH >= maxH){”

change in:
“} if(currH >= maxH){”
else the function do the resize only one side (width or height) if the image is greater then both width and height

Thanks for a great post, and thanks emidio your solution is what made the scaling work for really large images!

Could you provide a simple example showing your script resizing multiple images automatically to any image using a particular class name?

@mark i came up with this it works but on my content sometimes getSize().x or y shows 0.

Anyone can help on that, thanks.

window.addEvent(’domready’,function(){
if(document.getElement(’div.blog_description’)) {
// only run on selected elements else don’t.
var images = document.getElement(’div.blog_description’).getElements(’img’);
//get all images Array.each(images,function(image,index) {
// loop over all images.
var newSize = scaleSize(200, 200, image.getSize().x, image.getSize().y);
// run function to get new sizes
image.width = newSize[0];
// set new width
image.height = newSize[1]
// set new height
})
}
});

Thanks for the article and the comments, they were very useful ;)
This works with jQuery:

$(document).ready(function(){
var img = $(”#image-landscape”);
var initW = img.width();
var initH = img.height();

$(’.controls LI A’).each(function(i, el){
$(el).click(function(e){
var newW = img.width(), newH = 0;
switch(el.rel){
case ‘zoomOut’:
newW -= 100;
break;
case ‘zoomIn’:
newW += 100;
break;
case ‘resizeProportionally’:
var newSize = scaleSize(200, 200, $(el.rev).width(), $(el.rev).height());
$(el.rev).width = newSize[0];
$(el.rev).height = newSize[1];
alert(’New Width: ‘ + newSize[0] + ‘, New Height: ‘ + newSize[1]);
return;
default:
newW = initW;
}

var ratio = initH / initW;
newH = newW * ratio;

img.attr(’width’, newW);
img.attr(’height’, newH);
});
});
});

can someone help explain, how can i use this code in page onload time? thanks in advance

Like all the scaling solution i found in the web its totally incomplete and only covers one side of the scaling. This solution ist just for images which are larger in both dimensions. For many cases it doesn´t work. For example if the original image is smaller. Or just one element height or width is smaller.

:(