EasyZoom - jQuery image zoom plugin

EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the original work by Alen Grakalic. EasyZoom supports touch-enabled devices and is easily customisable with CSS.
Setup
HTML
EasyZoom does not rely on a specific markup structure but it is important that the EasyZoom target element (<div class="easyzoom">
) only contains a link to the large image and the smaller image. Any other elements within the EasyZoom target must not affect its layout, E.G. elements that are positioned absolutely.
<div class="easyzoom"> <a href="images/zoom.jpg"> <img src="images/standard.jpg" alt="" /> </a> </div>
CSS
The EasyZoom target element must 'shrink wrap' the smaller image, this can be achieved either by floating it or by displaying it as an inline block. Extra white space below the image (usually caused by the line box the image sits within) can be removed either by displaying it at block level or changing its position within the line box.
Take a look at the included easyzoom.css
for more information on styling EasyZoom.
/* Shrink wrap strategy 1 */ .easyzoom { float: left; } .easyzoom img { display: block; } /* Shrink wrap strategy 2 */ .easyzoom { display: inline-block; } .easyzoom img { vertical-align: bottom; }
JavaScript
The EasyZoom plugin is instantiated as any other jQuery plugin and an instances API can be accessed via element data. EasyZoom is also AMD and CommonJS compatible.
// Instantiate EasyZoom plugin var $easyzoom = $('.easyzoom').easyZoom(); // Get the instance API var api = $easyzoom.data('easyZoom');
Options
Global options can be specified via the standard jQuery plugin interface.
- loadingNotice
-
The text to display within the notice box while loading the zoom image. Default:
"Loading image"
. - errorNotice
-
The text to display within the notice box if an error occurs loading the zoom image. Default:
"The image could not be loaded"
. - preventClicks
-
Prevent clicks on the zoom image link. Default:
true
. - onShow
-
Callback function to execute when the flyout is displayed. Default:
undefined
- onHide
-
Callback function to execute when the flyout is removed. Default:
undefined
API
-
.show([MouseEvent|TouchEvent])
- Displays the zoom image flyout. Optionally takes an instance of a mouse or touch event.
-
.hide()
- Removes the zoom image flyout.
-
.teardown()
- Removes all events and elements created and attached by EasyZoom.
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu