最新jquery zoom插件

http://www.elevateweb.co.uk/image-zoom/examples

Installation and usage

Download the source files (available here) and include the jquery and elevatezoom plugin files into your project

<script  type="text/javascript" src="jquery.js"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

Include your Image

Elevate Zoom works best using two images, one low resolution for the visible image, and one high resolution for the zoomed image.If you only have one image available, Elevate Zoom will still work if you scale down the image, although this is not recommended as your page load time will increase ifyou are loading larger images

Please ensure your small image is proportionally scaled down from the large image.

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

Activate the zoom - Basic Example

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

responsive	false	Set to true to activate responsivenes. If you have a theme which changes size, or tablets which change orientation this is needed to be on. Possible Values: "True", "False"
scrollZoom	false	Set to true to activate zoom on mouse scroll. Possible Values: "True", "False"
imageCrossfade	false	Set to true to activate simultaneous crossfade of images on gallery change. Possible Values: "True", "False"
loadingIcon	false	Set to the url of the spinner icon to activate, e.g, http://www.example.com/spinner.gif. Possible Values: "True", "False"
easing	false	Set to true to activate easing. Possible Values: "True", "False"
easingType	zoomdefault	default easing type is easeOutExpo, (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b Extend jquery with other easing types before initiating the plugin and pass the easing type as a string value.
easingDuration	2000
lensSize	200	used when zoomType set to lens, when zoom type is set to window, then the lens size is auto calculated
zoomWindowWidth	400	Width of the zoomWindow (Note: zoomType must be "window")
zoomWindowHeight	400	Height of the zoomWindow (Note: zoomType must be "window")
zoomWindowOffetx	0	x-axis offset of the zoom window
zoomWindowOffety	0	y-axis offset of the zoom window
zoomWindowPosition	1	Once positioned, use zoomWindowOffsetx and zoomWindowOffsety to adjust Possible values: 1-16
lensFadeIn	false	Set as a number e.g 200 for speed of Lens fadeIn
lensFadeOut	false	Set as a number e.g 200 for speed of Lens fadeOut
zoomWindowFadeIn	false	Set as a number e.g 200 for speed of Window fadeIn
zoomWindowFadeOut	false	Set as a number e.g 200 for speed of Window fadeOut
zoomTintFadeIn	false	Set as a number e.g 200 for speed of Tint fadeIn
zoomTintFadeOut	false	Set as a number e.g 200 for speed of Tint fadeOut
borderSize	4	Border Size of the ZoomBox - Must be set here as border taken into account for plugin calculations
zoomLens	true	set to false to hide the Lens
borderColour	#888	Border Colour
lensBorder	1	Width in pixels of the lens border
lensShape	square	can also be round (note that only modern browsers support round, will default to square in older browsers)
zoomType	window	Possible Values: Lens, Window, Inner
containLensZoom	false	for use with the Lens Zoom Type. This makes sure the lens does not fall outside the outside of the image
lensColour	white	colour of the lens background
lensOpacity	0.4	used in combination with lensColour to make the lens see through. When using tint, this is overrided to 0
lenszoom	false
tint	false	enable a tint overlay, other options: true
tintColour	#333	colour of the tint, can be #hex, word (red, blue), or rgb(x, x, x)
tintOpacity	0.4	opacity of the tint
gallery	null	This assigns a set of gallery links to the zoom image
cursor	default	The default cursor is usually the arrow, if using a lightbox, then set the cursor to pointer so it looks clickable - Options are default, cursor, crosshair