Image Zoom Effect With jQuery

As I said this effect would probably be useful for e-commerce sites, but I don’t see any reason why you can’t use it for any other sites. The basic idea is to have the image ‘zoom’ forward & show an approximately 25% larger version of the image. So let’s get on with it.

There is a little bit of a caveat with this effect. Your images must be big enough to allow for a 25% increase in size to avoid image degradation. For example if you want to make your images 100 pixels you will need images 125 pixels in size (25% of 100 is 25).

jQuery Zoom Effect: HTML

First let’s look at the HTML. Really all you need is a image with a hyperlink around it. Like this:

To make targeting easier you could give your hyperlink a class like I have. This would enable you to give all hyperlinks with that class the zoom effect.

jQuery Zoom Effect: CSS

We need to set up some CSS to help with the zoom effect. So let’s take a look.

This is just the important part of CSS. If you do not add these it probably won’t work correctly. As for styling? Well it’s up to you. One important thing is that you will need to adjust the height to be the size you wish your images to display at without the 25% increase.

jQuery Zoom Effect: jQuery

Before I explain the jQuery code let’s take a look at the entire script:

I have tried to write this so it is ambiguous to the width & height and works out the 25% increase itself. I’ll explain all you need to do to make it work at the end, but first let’s go through how it works.

First we have the standard DOM ready event. Next the selector. If you have used a different class to zoom you will need to change it there. It basically says for every element you find that is a hyperlink and has the class zoom do the following.

Next we work out some variables. First what is the image’s height & width, next what is that height & width plus 25%, finally the position shift needed to make it look as if the image is resizing from it’s center. The children(0) selects the image element as it is the only child of the a.zoom element.

Next we use the mouseenter event. We set it’s z-index to bring it above any other elements nearby, then select the image again, cancel any animations that may be still running on this element, then animate the width, height, top and left positions to make the image zoom from it’s center point. If you wish to slow or speed the animation you can change the 210 number that follows. It is in milliseconds.

Finally we use the mouseleave event. This does the exact reverse of the enter event. We select the image, stop any animations, then set the width, height, top, and left back to their original values. Then using the callback function we make sure the height is back to it’s original value, then select the parent and reset the z-index.

You may be asking why set the index on the hyperlink? In testing, if I set the index only on the image nearby elements would cover the hyperlink’s click event.

jQuery Zoom Effect: Instructions

To get it up and running quickly all you need to do is have jQuery attached, copy the jQuery code into your page (between script tags), and then change the selector on line 2 of the code to whatever you need. Just remember if you don’t set a width or height in your CSS the image will be made 25% bigger than it’s actual dimensions and it may cause the image to degrade.

jQuery Zoom Effect: Demo

Here is a demo of the effect. You may note that it looks similar to an effect which was achieved using only CSS in my post looking at CSS transforms & transitions.

jQuery Zoom Effect: Important Notes

One minor bug I have noticed with this effect is that using auto margins to center the image will stop the jQuery code from working in the correct manner. Instead of resizing from the center it will resize from the right or left side of the image. To fix this place a div element around the image with the width & height of the image before the zoom effect & center that with a margin.

Another small bug is that to because the image is positioned relatively & not absolutely you will need to place it inside a element with a height if you do not want the resize to effect (move down) any of the elements below it.

I hope this tutorial has been helpful. I also want to apologise to everyone for the gap in posts. I’ve been struggling to come up with new ideas recently. Let’s call it writers block… As always though, I’m here to help. If you have any problems or questions about this tutorial let me know & I’ll help you out as soon as I can.

ImageJavascriptjQueryZoom