Geek asks and answers

Calling jQuery Extension Functions Outside

I have a jQuery extension that I wrote to compare 2 images. I call this the "control image" using the following:

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

The extension works exactly as I expected. Inside the extension there is a magnifyImage function. I wanted to add a slider for those who are viewing a tool that does not have a spinning wheel. So, I have 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 ZoomCompare image by "#controlImage" will increase and decrease accordingly. I do not understand how I can do this with the help of the documentation, and was hoping for a push in the right direction.

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

+5
source share
1 answer

I reached 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)
});

This is not exactly what you want (since it is not attached externally, only internally), but it works.

To make it work from the outside, I would do the following:

  • find a way to capture the plugin instance (for example, by calling $ ('selector'). imageZoomCompare ('get')
  • calling magnifyexternal () method on this instance
+2
source

More articles:


All Articles