Tools, Works

Introducing Wadda the Image Zoomer using Canvas

Apr 05, 2010 MaXPert 52 Comments

What is Wadda?

Wadda is the next generation image zooming technology utilizing Canvas technology to zoom into images. This allows user to have multiple levels of zoom without having multiple high definition images for each level of zoom.

Compatible Browser?

Every browser that supports canvas technology.

Usage

Its “really” easy! use the normal image tag with title=”url_of_hd_image” so for example:

where foo.jpg is thumbnail image and foo_hd.jpg is the high defination image.

On your required event create the wadda object, like this:

where xOff is x-offset from mouse cursor and yOff is y-offset from mouse cursor, zoom is the initial zoom of image, lensRadius is the radius of lens and fadeLens enables/disables lens fade effect.

View Demo 1
View Demo 2

Want to try it yourself?

Download Files

About the author: MaXPert

Expert & Freelancer in PHP, MYSQL, Javascript, including many frameworks like codeigniter, cakephp, mootools, jquery, prototype js and a long list.