Javascript zoom effect?

Question

We got this assignment from school to reproduce this example (created in Flash) into plain Javascript, HTML and CSS (jquery/Mootools not alllowed). Now i got the grid right, but i can't figure out what function to use to zoom into all the images at once? What would be a solution? One that crossed my mind is onClick every image goes in to the real size and using Javascript to disable the toolbars and then using keyarrows to navigate? Or is there a simpler way?

http://www.simpleviewer.net/postcardviewer/app/

Answer 1

Javascript / jquery would be best way to do so

MojoZoom is a free JavaScript Image Zoom script that works by moving your mouse over an image to see an zoomed version of it.

It places a square to the right of the image with the magnified portion of the image.

In addition to adding the zoom effect to your image, it will also automatically link it to its high resolution version.

The developers also released a slightly modified version of the script called MojoMagnified. Both of these are independent scripts and do not require external JS libraries to work

refer http://www.nihilogic.dk/labs/mojozoom/

also refer 5 Amazing JavaScript Image Zoom Scripts