ImageZoom¶
Config Attributes¶
Class Detail¶
Config Attributes Detail¶
- ImageZoom.config.imageNode¶
{String|HTMLElement} - 小图元素选择器或小图元素.
- ImageZoom.config.type¶
{String} - 可选, 缩放显示类型, 默认是标准模式 ‘standard’, 或者内嵌模式 ‘inner’.
- ImageZoom.config.bigImageSrc¶
{String} - 可选, 大图路径, 为 ‘’ 时, 取触点上的 data-ks-imagezoom 属性值. 默认为 ‘’.
- ImageZoom.config.bigImageWidth¶
{Number} - 可选, 大图宽度, 默认为 800;
- ImageZoom.config.bigImageHeight¶
{Number} - 可选, 大图高度, 默认为 800;
- ImageZoom.config.preload¶
{Boolean} - 可选, 是否预加载大图. 默认为 true.
- ImageZoom.config.hasZoom¶
{Boolean} - 可选, 初始时是否显示放大效果. 默认为 true, 显示放大. 在多图切换时, 可重设该值来开启或关闭显示放大功能. 如果多个图都不需要放大显示, ImageZoom 不会生成任何东西.
- ImageZoom.config.width¶
{Number|String} - 可选, 放大区域宽度. 默认为 ‘auto’, 当取 ‘auto’ 时, 宽度取小图的宽度.
- ImageZoom.config.height¶
{Number|String} - 可选, 放大区域高度. 默认为 ‘auto’, 当取 ‘auto’ 时, 高度取小图的高度.
- ImageZoom.config.iconClass¶
{String} - 可选, 放大镜图标的类, 默认为 ‘ks-imagezoom-icon’
- ImageZoom.config.showIcon¶
{Boolean} - 可选, 是否显示放大镜小 icon, 默认为 true.
- ImageZoom.config.lensClass¶
{String} - 可选, 镜片类, 默认为 ‘ks-imagezoom-lens
- ImageZoom.config.wrapClass¶
{String|HTMLElement} - 显示区域容器的类.
Properties Detail¶
- ImageZoom.prototype.image¶
{HTMLElement} - 需要缩放的小图元素.
- ImageZoom.prototype.viewer¶
{HTMLElement} - 显示区域的容器元素.
- ImageZoom.prototype.lens¶
{HTMLElement} - 镜片元素.
- ImageZoom.prototype.lensIcon¶
{HTMLElement} - 放大镜图标元素.
- ImageZoom.prototype.bigImage¶
{HTMLElement} - 大图元素.
Methods Detail¶
- ImageZoom.prototype.show()¶
- show ()显示放大区域.
- ImageZoom.prototype.hide()¶
- hide ()隐藏放大区域.
- ImageZoom.prototype.set()¶
- set (name,val)设置bigImage、hasZoom属性
Parameters: - name (String) – 属性名, igImage或hasZoom
- val (String|Boolean) – 属性值, bigImage属性为String类型, hasZoom为Boolean类型
KISSY.use("imagezoom",function(S,ImageZoom) { var m = new 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); }); });
- ImageZoom.prototype.changeImageSrc()¶
- changeImageSrc (src)设置小图 src.
- ImageZoom.prototype.refreshRegion()¶
- refreshRegion ()调整放大区域位置.