Dynamically resize images

This site is best viewed in a modern browser with JavaScript enabled.

b3nj4m1n

This question has been asked a hundred times, but I haven't been able to find the perfect solution, -yet.

I have a page where i load pictures dynamically when user clicks <- or -> buttons, with some simple jQuery.

$.post('/v2/_ajax/loadImage.php', { 
[INDENT]	event_id: event_id, image_id: image_id,[/INDENT]
}, function(data) {				
[INDENT]	target.html(data);[/INDENT]
});

What i need, is a way for the picture to be resized, if it exceeds 900px in width, OR if the height is bigger than the browser - 60px.

I have tried the jQuery plugin MaxImage (http://www.aaronvanderzwan.com/maximage/) but it has some very strange behaviour, and it only resizes when you resize the browser, not when the image is loaded.

Is there any good solution?

savvykms

You could check each image element on the page and simply set the CSS/HTML properties for width/height via Javascript.

var img = document.getElementById('someimage');
  if (img.width > 900) { document.getElementById('someimage').width = 900; }