EasyZoom实用的jquery图片放大插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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 plugin
var $easyzoom = $('.easyzoom').easyZoom();

// Get the instance API
var 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.