JavaScript / CSS / DOM image magnifier

I found a rather interesting site while looking for a template for our group project. I don’t recall hearing about or seeing anything like this. This scrip allows you to add a magnifier to your pictures. The code runs on a mouseover event which turns on the zoom feature. This code is also useful if you have a low and high resolution picture of the same image. You can load the low resolution image on your page and reference the bigger picture when you use the zoom feature.

You can increase the zoom by using the keyboard up arrow or decrease the zoom by using the keyboard down arrow. The left and right arrow keys decrease or increase the zoom window size. There are more options available if you look at the script: tjpzoom.js

I haven’t added this to a site yet but I’m guessing that the zoomed image is only as good as the original picture. I plan to put this on my list of things that I want to experiment with when I have more time. I would add the feature to the blog but I don’t think it works as a post. However, here is a sample of what it looks like:

You should notice that I zoomed in on one of the boy's heads. I am sure the Blog won’t do the image justice so you will have to visit this site to see how good this looks.

I don’t really surf unless I am looking for something and then it usually involves looking for something specific. I am not sure how I even got to this site but I think it is very interesting!