Close Up: Decent Zoom Effects with elevateZoom for jQuery

Onlineshops have them. I particularly like the product pictures over at Amazon. Hovering the pictures with your mouse enables a zoom effect that shows a larger portion of the original right beside the image. If you like these presentations you might also like to implement similar effects into your own web projects. The jQuery plugin elevateZoom promises to achieve just that. It can even be customized to vary the effects to your liking. elevateZoom

One IMG Element, Two Image Files and jQuery

To put elevateZoom, crafted by the welsh web agency Elevate, into effect, you will first want to embed jQuery and the JavaScript as usual into the head of the HTML document. Once done the plugin can get invoked on any given IMG element. The bigger version of the images, needed for the zoom effect, gets called via a data attribute added to the IMG element:

<img id="pic" src="pic_normal.jpg" data-zoom-image="pic_for_zoom.jpg" />

The following jQuery call invokes elevateZoom on the picture:

$("#bild").elevateZoom();

This single line of JavaScript is sufficient to achieve zoomability on an image. Hovering the mouse over the picture shows a zoomed segment right beside the original image. Inside the original a rectangular frame indicates which segment of the original is shown in the zoom area. Simple Zoom Effect

Defining The Position Of The Zoom Segment

The option zoomWindowPosition is used to position the zoom window. 16 different anchorpoints are available:

$("#pic").elevateZoom({
  zoomWindowPosition: 6
});

In our example we chose the position 6 which will align the zoom window centered right under the original image. If none of the possible anchorpoints appeal to you, you can as well choose an individual DIV container as target of the zoom. Positions are freely defined via CSS then. As a third variant you can relinquish the use of a separate zoom window entirely. Doing so results in the zoomed area being shown inside the original image element (inner zoom):

$("#pic").elevateZoom({
  zoomType: "inner"
});

Classical Zoom Using a Magnifying Lens

An alternative to rectangle-based zooming is the lens magnifying effect:

$("#pic").elevateZoom({
  zoomType: "lens",
  lensShape: "round",
  lensSize : 200
});

Size and shape of the lens is changeable. Zoom with Magnifying Lens elevateZoom has more configuration options. There are fade-ins and fade-outs as well as an easing effect to control the movement inside the segment. Conclusion: elevateZoom is easily applicable and individually configurable. An example gallery gives an overview of the existing possibilities. The plugin is freely available under the terms of the MIT and GPL license. (dpe)