用<script src='..'>引入elevatezoom的js
在要使用的图片<img>里面加上属性:data-zoom-image=‘任意图片路径’(该图片不重要)
自己定义一个函数:
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
放大镜就搞定了!!
另附:
参数 | 描述 | 默认值 |
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);放入不同图片地址,修改函数重新调用