For those of you looking for a way to display a gallery of photos but still give the option to show more in depth images, I have just the thing for you. The JQZoom Plugin does just this.

What the Plugin actually does is take a thumbnail, or reduced size image, along with a larger image of the same item. Then it will zoom into whatever part of the thumbnail the mouse is over. And display in a separate window that will be the size of your choice.

Let’s begin by creating a new HTML file to work with. Once that is done, we can go ahead and add the appropriate references to the Head of our HTML file. We will be adding two JavaScript/JQuery references.

Next we will need to add the CSS file included in the source code download below which will be used for the display and styling of our Zoom window. This will also be added to the Head of our Htm file.

Next we must be sure to include in our project at least two images, a large Image and a thumbnail, or smaller, version as well that we will be zooming into.

Now we can go ahead and begin by adding an anchor tag with a class set to whatever you may like, for this example I will name it “MYCLASS”, as well as a title to help distinguish what we are working with. Now before we call it a day with this anchor tag, we will also set the href equal to the larger image.

Within this anchor tag, we will be adding an image tag with the source set to the smaller thumbnail image. By wrapping the image we will use the smaller image to display the zoomed portion of the larger image in a window.

Lastly what we will need to do is make the call for the JavaScript/JQuery event to happen to allow us to zoom. To do so, we will be calling the anchor tag by its class and setting it to the JQZoom plugin.

And that’s all you need for your very own JQuery zoom. I have also included some more examples within the source code file. If you have any other questions or concerns and have not yet downloaded the source code for this project, I strongly suggest doing so. Seeing it in its entirety can help clear up many of your questions. Thank you for your time and I hope this has been helpful, take care.
Download Source Files