Introducing Wadda the Image Zoomer using Canvas
05. Apr, 2010 
40 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:
<img src=”foo.jpg” id=”thumb” title=”foo_hd.jpg” />
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:
var wad = new Wadda(’thumb’, {
lensSize: 150,
xOff: 0,
yOff: 0,
fadeLens: true,
zoom: 2
});
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
Related Post
Wordpress Themes
I’m a Web Developer and Designer from Cebu City, Philippines. I am good at Wordpress, CodeIgniter, PHP, mySQL, jQuery and a standard compliant XHTML and CSS.
Interesting but simply doesn’t work on Firefox 3.6
Oh, sorry it work’s but with a little delay..
Great effort made. I am really amazed with the work you have made here..
But the problem is it does not support in chrome and Firefox, otherwise it’s awesome work…
@Web Risorsa are you sure? It does support FF and Chrome.
Really cool plugin, “the spy glass” should be the name
It works; is slow on FF due to slow javascript engine. See comments above.
Hi.. its looking nice but not work in IE7.
Yep won’t work on IE; IE9 will support it being the first IE to support canvas technology.
That is an excellent implementation using the next generation HTML5 scripting language. Thanks for this.
Sorry, I’m just not quite getting this to work on my page (can’t show b/c it’s internal only). But I have the two scripts included and then I have this:
<script>
var zoomr = null;
listenOn(window, ‘load’, function(){
var image = byId(‘zoomimage’);
zoomr = new Wadda(image);
});
</script>
And my image looks like this:
I also tried including the full script you have from the Demo 2 and still can’t get it work. What am I missing?
<img src=”/images/small/2.jpg” alt=”mine” title=”/images/large/2.jpg” border=”0″ id=”zoomimage”>
There appears to be some sort of bug with the script somehow in how it interacts with certain CSS properties. I have my image wrapped inside a div and there are other elements on the page which are floated. It appears that it does work. However, only the top portion of my image is clickable and then the actual zoom feature appears beneath all of my content at the bottom of the page.
You can try using this page: http://gallery.usgs.gov/photos/03_04_2009_t85Bsf1RQl_03_04_2009_0 and then applying the script there (it doesn’t include the script right now).
If you can test this out that would be great unless you know where there might be a CSS conflict.
wow..its a good zoom
so smooth ^_^’
thanks…
its a good, but after i’m look moJoZoom…hmmm…;))
nice nice
This really an interesting example.
Wow very cool plugins. Thanks. Need to try this one.
I have been trying to get this to work with IE 6/7/8 using Explorer Canvas R3, but I can’t figure it out.
Any chance of helping out where to add the code:
G_vmlCanvasManager.initElement( );
that they describe in http://code.google.com/p/explorercanvas/wiki/Instructions
thx for sharing this, great work…