Monday, December 5th, 2005

JavaScript Image Magnifier

Category: Component, JavaScript, Library, Showcase

This is a fun one. A small JavaScript image magnifier has been released.

With a big of JavaScript, you can add magnification to any images on your page.

You can add:

<script type="text/javascript" src="http://valid.tjp.hu/zoom/tjpzoom.js">
</script>

and:

<div style="float:left"
onmouseover="zoom_on(event,300,239,'image.jpg');"
onmousemove="zoom_move(event);" 
onmouseout="zoom_off();"><img 
src="image.jpg"/></div>

You can also have a high-res image for the zoom piece, and use a low-res as the main image on the site.

Could be useful for some Where’s Waldo? Product Zoom? and adult sites? ;)

image-magnifier.jpg

Posted by Dion Almaer at 1:27 am
5 Comments

+++--
3.7 rating from 44 votes

5 Comments »

Comments feed

Splendide ajax, sa donne envie d’aller plus loin !
Il est vain de vous dire qu’une traduction serai sympas,
Bien ami[calm]ent

Comment by artotal — December 5, 2005

Douglas Crockford also has an interesting magnifier demo on his site, with high-res images within a drag-and-droppable “lens”:

http://crockford.com/ynh/demo3.html

I also did something similar on my own site (in 2002 and IE-only, I have long since learned of web standards.)
http://www.schillmania.com/summer_02/

Comment by Scott Schiller — December 5, 2005

Dart just put out a new ASP.NET control for doing image zooming. “>PowerWEB Zoom.

Comment by jft — May 22, 2006

Sorry – that link is http://www.dart.com/powerweb/zoom.asp

Comment by jft — May 25, 2006

Thx! Great script

Comment by linkhyrule5 — March 29, 2008

Leave a comment

You must be logged in to post a comment.