elevateZoom的使用（适用于只有一张图）

html:

用<script src='..'>引入elevatezoom的js

在要使用的图片<img>里面加上属性：data-zoom-image=‘任意图片路径’（该图片不重要）

 

js:

自己定义一个函数：

function elevatezoom_show(url, box) {
var big = $(box).data('elevateZoom'); //box放img的id或者类名
big.swaptheimage(url, url);

}

 

在id处调用放大镜：（可以在option里面设置放大镜配置，也可以去掉option，此时为默认配置）

var option = { zoomWindowOffety: 190, zoomWindowOffetx: -340, zoomWindowWidth: 700, zoomWindowHeight: 800 };

$('#我是图片id').elevateZoom(option);

 

直接在引入图片的地方调用函数：

elevatezoom_show(url, box) // url放图片地址，box放img的id

 

放大镜就搞定了！！

另附：

elevateZoom的配置表：

 

参数	描述	默认值
responsive	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:	false
scrollZoom	Set to true to activate zoom on mouse scroll. Possible Values:	false
imageCrossfade	Set to true to activate simultaneous crossfade of images on gallery change. Possible Values:	false
loadingIcon	Set to the url of the spinner icon to activat	false
easing	Set to true to activate easing.	false
easingType	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.	zoomdefault
easingDuration
lensSize	used when zoomType set to lens, when zoom type is set to window, then the lens size is auto calculated	200
zoomWindowWidth	Width of the zoomWindow (Note: zoomType must be	400
zoomWindowHeight	Height of the zoomWindow (Note: zoomType must be	400
zoomWindowOffetx	x-axis offset of the zoom window	0
zoomWindowOffety	y-axis offset of the zoom window	0
zoomWindowPosition	Once positioned, use zoomWindowOffsetx and zoomWindowOffsety to adjust Possible values: 1-16	1
zoomTintFadeIn	Set as a number e.g 200 for speed of Tint fadeIn	false
zoomTintFadeOut	Set as a number e.g 200 for speed of Tint fadeOut	false
borderSize	Border Size of the ZoomBox - Must be set here as border taken into account for plugin calculations	4
gallery	This assigns a set of gallery links to the zoom image	null
tint	enable a tint overlay, other options: true	false
tintColour	colour of the tint, can be #hex, word (red, blue), or rgb(x, x, x)	#333
tintOpacity	0.4	opacity of the tint
zoomLens	set to false to hide the Lens	true

 

该表出处：http://www.sucaihuo.com/js/127.html

 

 

注意：一般放大镜都是一大一小两张图 ，该方法适用只有一张大图的时候。如有两张图，将函数里面的big.swaptheimage(url, url);放入不同图片地址，修改函数重新调用