Calling jQuery Extension Functions Externally

Question

I've got a jQuery extension that I wrote for comparing 2 images. I call it on a "control image" using the following:

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

The extension works exactly the way I intended. Inside the extension is a function called magnifyImage. I wanted to add a slider for someone viewing the tool that doesn't have a scrollwheel on their mouse. So, I've got the following HTML5 slider code:

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

The goal is when the user moves the slider, the magnifyImage function inside the actively selected imageZoomCompare on "#controlImage" will increase and decrease accordingly. I'm not understanding how I can accomplish this via the documentation and was hoping for a nudge in the right direction.

Fiddle: http://jsfiddle.net/d3xt3r/YeP4Y/

Answer 1

I've achieved the goal for the slider:

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

Starting line 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');
},

Around line 402:

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

It's not exactly what you want (since it's not binded externally, only internally) but it works.

Also to make it work externally I'd do the following:

• find a way to grab the instance of the plugin (eg. by calling $('selector').imageZoomCompare('get')
• call the magnifyexternal() method on this instance