options.adoc

Plugin Options

The widget options can be set at the time of creation:

var $img = $("#image1").imgViewer({
  dragable: false,
  onClick: function( e, pos ) {
       $("#position").html("relx: " + pos.x + " rely: " + pos.y + " zoom: " + this.options.zoom() );
  }
});

or afterwards by:

$img.imgViewer("option", "zoomable", false);

The current value of an option can be retrieved by:

$img.imgViewer("option", "zoomMax");

Table of Contents

• dragable - Controls if image will be dragable
• zoomStep - controls zoom change for each mousewheel click
• zoom - Get/Set the current zoom level
• zoomMax - Get/Set the zoom limitage
• zoomable - Controls if image will be zoomable
• onClick - mouseclick callback on the image
• onUpdate - Callback triggered after the image has been redisplayed
• onReady - Callback triggered when the plugin is fully initialised

dragable - Controls if image will be dragable

• Default: true

• Example - to disable image dragging:

$("#image1").imgViewer("option", "dragable", false);

zoomStep - controls zoom change for each mousewheel click

• Default: 0.1

• Example:

$("#image1").imgViewer("option", "zoomStep", 0.05);

zoom - Get/Set the current zoom level

• Default: 1 (ie the entire image is visible)

• Example - to display the image magnified 3x:

$("#image1").imgViewer("option", "zoom", 3);

zoomMax - Get/Set the zoom limitage

• Default: 0 (ie no limit on zoom)

• Note: values less than 1 have no affect

• Example - to restrict zoom to 3x or less:

$("#image1").imgViewer("option", "zoomMax", 3);

zoomable - Controls if image will be zoomable

• Default: true

• Example - to disable image zooming:

$("#image1").imgViewer("option", "zoomable", false);

onClick - mouseclick callback on the image

• Default: $.noop

• Note: within the callback function this refers to the imgViewer object

• Callback Arguments:

• e: the original click event object

• Example - to display the relative image coordinate clicked (relative image coordinates range from 0 to 1 where 0,0 correspondes to the topleft corner and 1,1 the bottom right):

$("#image1").imgViewer("option", "onClick", function(e) {
    var pos = this.cursorToImg( e.pageX, e.pageY);
    $("#click_position").html(e.pageX + " " + e.pageY + " " + pos.x + " " + pos.y);
});

onUpdate - Callback triggered after the image has been redisplayed

• Default: $.noop

• Note: within the callback function this refers to the imgViewer object

• Callback Arguments:

• None

• Example - to display the relative image coordinate at the centre of the view:

$("#image1").imgViewer("option", "onUpdate", function() {
    var pos = {
        relx: this.vCenter.x/$(this.img).width(),
        rely: this.vCenter.y/$(this.img).height()
    };
    $("#centre_position").html(pos.relx + " " + pos.rely);
});

onReady - Callback triggered when the plugin is fully initialised

• Default: $.noop

• Note: within the callback function this refers to the imgViewer object

• Callback Arguments:

• None

• Example - to zoom and pan the image to a focal point on widget load:

$("#image1").imgViewer({
    onReady: function() {
        this.options.zoom = 3;
        this.panTo(1,1);
    }
});