Question

I seem to be having a difficult time finding a plugin that will zoom into my image while leaving the rest of the image at the same size.

The reason why I need it is because I am using an image map and trying to zoom into the image on a particular continent. Once zoomed in all the way I will replace the image I zoomed into with a new image and image map for that particular continent. I don’t want the rest of the world map changing size when this is happening.

Does anyone know of a good plugin for this?

Answer 1

I have found a tutorial that seems to demonstrate something close to what you want, along with instructions on how to get there: http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

Here’s another: http://mlens.musings.it/

EDIT:
Based on Justin’s comment:

What I am talking about here is an actual zooming animation. Not just merely replacing it as I could have done a fade in animation.

Use jQuery’s animate() method to achieve this.

Code:

$(function(){
    $('#zoomimage').click(function(){
        $(this).animate({height:'150%', width:'150%'}, 500);
    });
});​

EDIT: Based on Justin’s next comment:

Hey Aditya, only problem is that the size is affected. Is there a way to crop it as it grows so it stays the same size?

That can be done by manipulating the image’s container to hide the rest of the image while it grows. Something like this:

<div style="width:275px; height:95px; overflow:hidden;">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="zoomimage" />
</div>​

The overflow:hidden; ensures that the rest of the image does not show.