Usage
new S.ImageZoom(trigger, config)
S.ImageZoom 构造器, 传入小图元素或小图id及配置项 , 例如
KISSY.ready(function(S) {
new S.ImageZoom("#standard", {
bigImageSrc: 'big image url'
});
});
Config
type - String
缩放显示类型, 默认是标准模式 'standard', 目前仅支持此模式.
bigImageSrc - String
大图路径, 为 '' 时, 取触点上的 data-ks-imagezoom 属性值. 默认为 ''.
bigImageSize - Array
大图高宽, 如 [800, 800];
是指在没有加载完大图前, 使用这个值来替代计算, 等加载完后会重新更新镜片大小, 具体场景下, 请设置个更合适的值.
position - String
大图显示在小图的哪个位置.
可取 'top', 'right', 'bottom', 'left', 'inner', 当为 'inner' 时, 会覆盖显示在小图上. 默认为 'right'.
offset - Number | Array
大图相对于小图位置的偏移量. 单一值或 [x, y]. 默认为 10.
x 值对应于水平方向上的偏移, y值对应于垂直方向上的偏移. 当 offset 为一个 Number 或 [Number] 时, 仅指水平方向上的偏移, 垂直方向上偏移为 0; 如果 position 设置 'top'/'bottom', 则需要通过 offset 为 [0, 10]来设置.
preload - Boolean
是否预加载大图. 默认为 true.
timeout - Number
等待大图加载的最大时间, 单位: s. 默认 2 min.
timeoutMsg - String
大图无法加载超时时, 显示的提示文字. 默认为 "图片暂不可用".
zoomSize - Array
放大区域宽高. 默认为 ['auto', 'auto'], 当取 'auto' 时, 宽/高 取小图的高/宽.
lensIcon - Boolean
是否显示放大镜提示图标, 默认为 true.
zoomCls - String
放大区域额外样式, 默认为 ''. 原有放大区域样式为 'ks-imagezoom-viewer', 设置该值会追加元素 class.
Members
image - HTMLElement
需要缩放的小图元素.
lens - HTMLElement
镜片元素.
lensIcon - HTMLElement
放大镜图标元素.
bigImage - HTMLElement
大图元素.
Methods
show()
显示放大区域.
hide()
隐藏放大区域.
set(name, val)
设置配置信息, 目前只可动态设置 bigImageSrc 这个值.
如果有多张图片切换时, 需要修改 大图src, 如:
KISSY.ready(function(S) {
var m = new S.ImageZoom("#multi");
S.Event.on("#imgList img", 'click', function() {
var data = S.DOM.attr(this, 'data-ks-imagezoom');
S.DOM.attr('#multi', 'src', data+'_310x310.jpg');
m.set('bigImageSrc', data);
});
});