Zoom-in and Zoom-out image when Mouse Scroll

Question

Just throwing the answer for the ones that will search for an answer to this question.

First, you will need to find a system to detect the mouse scroll. If you are courageous, you can develop it yourself. If you're not, you can find some pretty good libraries (ex : MouseWheel with JQuery).

Next, you will find another two ways to zoom in and out.

Easy way

First, let's cheat a bit. When you will have to zoom, just multiply the height and width of your image by a factor you will decide. To have height and width into a variable (JQuery)

var height = $('#image').height();
var width = $('#image').width();

For each scroll you will receive, you will only have 2 choices. Once you are able to know if the mousewheel goes up or down, you will just have to do something like this (JQuery)

height *= 2;
width *= 2;

This way, by doubling the size of your image, you will have the impression to zoom in.

Less easy way

If you want to zoom in as you would do in a GMap object, you can do something like that.

var firstHeight = $('#image').height();

height *= 2;
width *= 2;

scalechange = (actualHeight / firstHeight) - 1;
offsetX = -(coordX * scalechange);
offsetY = -(coordY * scalechange);

$("#image").css('top', offsetY + 'px');
$("#image").css('left', offsetX + 'px');

First, you have to have the first height of your image. Next, you will double the size of your image (zoom effect). Next step is to calculate the scalechange. You will be able to find multiple explanations and many way to calculate it, my method is as good as another. The two offsets presented are the new positions that your image will adopt (simple factor calculation, it's like making x percent on a price). Last part is to set the new values of your image.

In the end, you will be able to zoom and unzoom with ou without centering the image at your mouse position.

Be careful : The calculation above in only to zoom-in. You will have to do some maths to get the zoom-out!

Go further ?

Another way to go further would be to place your image in a div.

<div id="imageContainer" style="overflow:hidden;">
    <img id="image" src="YourImage">
</div>

By setting

"overflow:hidden;"

to your div, your image will zoom. But everything that will overflow your div will be hidden. If you set your div to the original size of your image, like this (JQuery)

$("#imageContainer").css('height', $('#image').height());
$("#imageContainer").css('width', $('#image').width());

Then you will have an image displayed that will always be at the same size, but your zoom will be effective. If you combine this to a drag'n'drop method, you have a GMap object-like (zoom in-out, moove the zoomed image, ...)

Hope it will help someone!