Seen Close Up: Beautiful Zoom Effects with ElevateZoom for jQuery

Especially of product images in online stores knows it, that by zooming an image section can be enlarged. The jQuery plugin allows elevateZoom exactly, namely a fancy zoom effect quickly and easily apply it to an image. Here there are different settings for customizing the effect available.


An IMG element, two image files and jQuery

To elevateZoom  use made ​​by the Welsh Webagentur Elevate, is primarily binds the JavaScript file with jQuery one in the head of an HTML document. Then the plugin is used by jQuery to any IMG element. A magnified view of the image, which is necessary for the zoom is determined by a data element within the image attribute:

<img id="bild" src="bild_normal.jpg" data-zoom-image="bild_fuer_zoom.jpg" />

Following jQuery call elevateZoom turns to the image:

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

More JavaScript is not immediately necessary to make the image zooming. If you move the mouse over the image gets, the right of the screen a window with a magnified image. Within the normal view shows a rectangular frame, which extract is just magnified.


Position of the cut-set

With the option zoom window position it is possible to determine the position of the zoom window. Are 16 different ways, in order to define an anchor point for the image as a position:

$ ( "# image" ) . elevateZoom ( {
  zoom window position :  6
} ) ;

The example chosen position 6 is the zoom window centered below the normal view represents Who wants to place the zoom window to somewhere else can also select an individual DIV container as the target for the zoom. Here is a vacant position is then determined by CSS itself.

As a third option can be omitted entirely separate zoom window. Then the magnified area is in the actual image element ( inner zoom shown):

$ ( "# image" ) . elevateZoom ( </ code > {
  zoom type :  "inner"
} ) ;

Back with magnifying glass

An alternative to the rectangular zooming represents the effect, in which the enlarged section is achieved by a lens:

$ ( "# image" ) . elevateZoom ( {
  zoom type :  "lens" ,
  lens shape :  "round" ,
  lens size :  200
} ) ;

Size and shape (round or square) of the lens are also definable.

Subscribe and never miss a post!

Subscribe to the free newsletter now and get fresh content delivered straight into your inbox. (No spam, we promise)

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.

Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!