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);放入不同图片地址,修改函数重新调用


猜你喜欢

转载自blog.csdn.net/zhong_kay/article/details/80582361