EasyZoom是一款优秀的jQuery图片放大插件。EasyZoom支持触摸设备，并且可以很容易的调整它的css样式。
HTML结构
EasyZoom不需要特别的html结构，只需要一个div，给它一个class easyzoom。然后在div中放置一个a元素用来指向大图，a中放置小图。
<div class="easyzoom"> <a href="images/zoom.jpg"> <img src="images/standard.jpg" alt="" /> </a></div> |
CSS
/* 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
EasyZoom通过jQuery来实例化对象，还可以通过元素数据访问对象实例的API。EasyZoom也兼容AMD和CommonJS。
// Instantiate EasyZoom pluginvar $easyzoom = $('.easyzoom').easyZoom();// Get the instance APIvar api = $easyzoom.data('easyZoom'); |
可用参数
loadingNotice 加载图片时的提示文字。 Default: "Loading image". errorNotice 加载出错的提示文字。 Default: "The image could not be loaded". preventClicks 阻止在图片上的点击事件。 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.
