Hey all. I'm working with AjaxBlender's "Proportional Image Resize" script (and no one there is answering questions at the moment). You can see the demo here. It uses Mootools.

It's a great script, but only works on one image (identified by ID). I want it to work on many images at once, identified by class. However, when I alter the script, var img = $('image-landscape'); to var img = $('.image-landscape');, the whole thing breaks. Any thoughts? The full script and HTML are below.

Code:
window.addEvent('domready', function(){
    var img = $('image-landscape');
    var initW = img.width, initH = img.height;
	
    $each($$('.controls A'), function(el, i){
        el.addEvent('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;	            
            }

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

            img.width = newW;
            img.height = newH;
        });
    });
});
Code:
<div class="controls">
<a href="javascript:;" rel="zoomIn">+</a>
<a href="javascript:;" rel="zoomOut">-</a>
</div>

<img src="1.png" class="image-landscape"><br />
<img src="2.png" class="image-landscape">