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