Question

I would like to do something similar to the effect in the link below.

http://wallbase.cc/wallpaper/549871

The image is initially rendered depending on the users screen resolution, and if the image is larger than the screen resolution of the user,on click the image in resizes in steps.

Can somebody guide me how to go about it.

I am not that good in jQuery,So would appreciate a “For Dummies” approach.

Thanks

Answer 1

It’s pretty simple. All that’s happening is that a click event on the image is changing the image’s width and height. Something like this:

var img = $('img');
var zoomWidthIncrement = img.width() * 1/3;
var zoomHeightIncrement = img.height() * 1/3;

img.click(function(){
    img.css({width: img.width() + zoomWidthIncrement, height: img.height() + zoomHeightIncrement});
});

You could also animate this zoom simply by using animate() to change the css values.