The widget options can be set at the time of creation:
var $img = $("#image1").imgViewer2({
zoomMax: 6,
onClick: function( e, pos ) {
$("#position").html("relx: " + pos.x + " rely: " + pos.y + " zoom: " + this.getZoom() );
}
});
or afterwards by:
$img.imgViewer2("option", "zoomMax", 6);
The current value of an option can be retrieved by:
$img.imgViewer2("option", "zoomMax");
- dragable - controls if image will be dragable
- zoomable - controls if image will be zoomable
- zoomStep - how much the zoom changes for each mousewheel click
- zoomMax - get/set the limit on the maximum zoom level of the image
- onClick - callback triggered by a mouseclick on the image
- onReady - callback triggered when the widget has been all set up and is ready to be used
-
Default: true
-
Example - to disable image dragging:
$("#image1").imgViewer2("option", "dragable", false);
-
Default: true
-
Example - to disable image zooming:
$("#image1").imgViewer2("option", "zoomable", false);
-
must be a positive number
-
Default: 0.5
-
Example:
$("#image1").imgViewer2("option", "zoomStep", 1.0);
-
must be >= 1
-
Default: null ie no limit on zoom
-
Example - to restrict zoom to 3x or less:
$("#image1").imgViewer2("option", "zoomMax", 3);
-
within the callback "this" refers to the imgViewer widget.
-
Default: null
-
Callback Arguments:
-
e: the original click event object
-
pos: javascript object with the relative image coordinates
-
{ x: relative x image coordinate, y: relative y image coordinate }
-
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").imgViewer2("option", "onClick", function(e, pos) {
$("#click_position").html(pos.x + " " + pos.y);
});
-
within the callback "this" refers to the imgViewer widget.
-
Default: null
-
Callback Arguments: none
-
Example - to set the zoom to 3 and move to the bottom right hand corner
$("#image1").imgViewer2("option", "onReady", function() {
this.setZoom(3).panTo(1,1);
});