Question

我有一个jQuery扩展，我写的比较2个图像。我使用以下内容在“控制图像”上调用它：

currentCompare = jQuery('#controlImage').imageZoomCompare({
    ...options....
})

扩展程序完全符合我的预期。扩展内部是一个名为magnifyImage的函数。我想为查看没有鼠标滚轮的工具的人添加一个滑块。所以，我有以下HTML5滑块代码：

<input type="range" id="imageZoomLevel" name="imageZoomLevel" min="2" max="10" value="2" onchange="javascript:switchZoom(this.value)" />

目标是当用户移动滑块时，“#controlImage”上主动选择的imageZoomCompare中的magnifyImage函数将相应地增加和减少。我不明白我是如何通过文档来实现这一目标的，并且希望能够朝着正确的方向努力。

小提琴：http://jsfiddle.net/d3xt3r/YeP4Y/

Answer 1

我已经实现了滑块的目标：

jsFiddle：http://jsfiddle.net/YeP4Y/5/

第230行：

magnifyexternal: function($tracker, newpower, zoomRange)
{
    var specs=$tracker.data('specs')
    //alert(JSON.stringify(specs));
    var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
    var magnifier2=specs.magnifier2, od=specs.imagesize, power=specs.curpower
    var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
    magnifier.$image.css({width:nd[0], height:nd[1]});
    magnifier2.$image.css({width:nd[0], height:nd[1]});
    //alert(JSON.stringify({width:nd[0], height:nd[1]}));
    specs.curpower=newpower //set current power to new power after magnification
    specs.$statusdiv.html('Current Zoom: '+specs.curpower);

    jQuery("input:radio[name=radioZoomLevel][value="+newpower+"]").attr('checked', true);

    this.showstatusdiv(specs, 0, 500);
    $tracker.trigger('mousemove');
},

第402行：

$("#imageZoomLevel").bind('change', function(){
fiz.magnifyexternal($tracker,$(this).val(), setting.zoomRange)
});

这不完全是你想要的（因为它没有在外部绑定，只在内部绑定）但它有效。

为了让它在外部工作，我会做以下事情：

找到一种方法来获取插件的实例（例如，通过调用$（'selector'）。imageZoomCompare（'get'）
在此实例上调用magnifyexternal（）方法

在外部调用jQuery扩展函数

1 个答案: