CSS, jQuery: How can I zoom a image gallery?

Question

I have an image gallery which holds lots of inline-block containers (similar to a chess field). No when I use the browser zoom strg + mouse wheel the images get scaled so that I can see more or less depending on if I zoom out or zoom in.

My question now is how I can do this directly in jQuery (maybe with a slide) without using the browser zoom function?

Is there an easy way to do this or do I have to change all widths heights?

Regards

Answer 1

The first question would be how much do you want to zoom the images and how big they are. I'm asking because you will need to preload the images at their maximum resolution, could be slow with large images.

Assuming this is not an issue, what I would do is write my own function to animate both width and height; I think there is no more straightforward way.

Other than this, there are plenty of jQuery plugins out there: just Google them, I've found an interesting list on: http://www.tripwiremagazine.com/2011/10/jquery-image-zoom.html

Answer 2

Try also this, in compact form:

$('#image').mouseover(function()
{
    $(this).animate({width: "300px", height: "300px"}, 'slow');
});
$('#image').mouseout(function()
{   
    $(this).animate({width: "200px", height: "200px"}, 'slow');
});