Images for Web 2.0
I expect a lot of useful things to emerge from the hype surrounding "web 2.0". Among other things the web will become editable, semantically searchable, and just plain cooler. My contribution to the coolness category is a way to zoom in on images using just a bit of javascript. I think there are plenty of applications for this, but first an explanation.
The javascript to do this is just under 100 lines, but most of that is an attempt to handle any sort of image thrown at the script. The concept itself is pretty simple.
* Create a div the same size as the image, put the image inside it
* Hide any content that is larger than the div (overflow:hidden)
* Scale and move the image when clicked
Figuring out the calculation for moving the image was the hardest. I worked it out on paper, but had apparently forgotten most of the transformation logic of 9th grade geometry. (twice the coordinate clicked minus half the width of the div if you are curious)
Download the javascript file for zooming images.
To use it, you just add an onLoad event to your image that calls makeImageZoomable:
<img onLoad="makeImageZoomable(this)" src="GreenMarketSquare.jpg"/>
Cool eh? But zooming in on an image that is already at its native resolution isn't that useful. Instead it would be great if you could have a zoomable high resolution image scaled down to fit your page requirements. Then when the user zooms in more detail is revealed. Just add a style tag of your desired width or height and this script will take care of the rest:
<img style="width:500px" onLoad="makeImageZoomable(this)" src="GreenMarketSquare.jpg"/>
If your image is saved as a progressive jpg things are even better as the user will see a decent version of the image before the entire image has completed the download.
Here is an example that shows it in action. (It isn't going to work in IE because buttons are handled differently in IE and I didn't feel like fighting IE's incompatibilities - bug me enough and I will do it)
I am also working on a GreaseMonkey script that will allow you to zoom any image on the web - stay tuned.
The javascript to do this is just under 100 lines, but most of that is an attempt to handle any sort of image thrown at the script. The concept itself is pretty simple.
* Create a div the same size as the image, put the image inside it
* Hide any content that is larger than the div (overflow:hidden)
* Scale and move the image when clicked
Figuring out the calculation for moving the image was the hardest. I worked it out on paper, but had apparently forgotten most of the transformation logic of 9th grade geometry. (twice the coordinate clicked minus half the width of the div if you are curious)
Download the javascript file for zooming images.
To use it, you just add an onLoad event to your image that calls makeImageZoomable:
<img onLoad="makeImageZoomable(this)" src="GreenMarketSquare.jpg"/>
Cool eh? But zooming in on an image that is already at its native resolution isn't that useful. Instead it would be great if you could have a zoomable high resolution image scaled down to fit your page requirements. Then when the user zooms in more detail is revealed. Just add a style tag of your desired width or height and this script will take care of the rest:
<img style="width:500px" onLoad="makeImageZoomable(this)" src="GreenMarketSquare.jpg"/>
If your image is saved as a progressive jpg things are even better as the user will see a decent version of the image before the entire image has completed the download.
Here is an example that shows it in action. (It isn't going to work in IE because buttons are handled differently in IE and I didn't feel like fighting IE's incompatibilities - bug me enough and I will do it)
I am also working on a GreaseMonkey script that will allow you to zoom any image on the web - stay tuned.
0 Response to Images for Web 2.0
Post a Comment