Javascript: resize image to fit window, then toggle full size and adjust size on click?

Question

Hi, I'm trying to create a small snippet to allow the onloaded image to be adjusted to fit the users resolution. And then allow the user to toggle between the actual image size, and the adjusted image size for their resolution. Here's what I got so far:

<img src="<?=$file['direct_url']?>" border="0" onload="if(this.width>screen.width/1.5) {this.width=screen.width/1.5;this.alt='Click image to view full size';}window.status=this.width;" onmouseover="if(this.alt) this.style.cursor='hand';" onclick="if (this.width=screen.width/1.5) {this.width=screen.width*1.5} else {this.width=screen.width/1.5}">

Any help is greatly appreciated!

Answer 1

I think the only thing you might need is a custom attribute where you store the original image with / height.

<img originalwidth="100" originalheight="100" />

You can retrieve/use those values using:

this.getAttribute('originalwidth');
this.getAttribute('originalheight');