JS Tutorial
Download
- Overview
- Documents
- Demos
User Rating: 0/5 ( 0 votes)
Your Rating:
imgViewer is a jQuery plugin that adds to an image the ability to zoom in and out with the mousewheel and pan around by click and drag. On touch enable devices pinch gestures can be used to zoom in and out and tap and drag to pan around.
A unique feature of this plugin is it's ability to work on images which have widths or heights specified as a percentage of their container.
Source: waynegm.github.io
1. INCLUDE JS FILES
<script src="jquery.js"></script> <script src="jquery-ui.js"></script> <script src="jquery.fs.zoetrope.min.js"></script> <script src="toe.min.js"></script> <script src="imgViewer.min.js"></script>
2. HTML
<img id="image1" src="test.jpg" width="50%" />
3. JAVASCRIPT
(function($) {
$("#image1").imgViewer();
})(JQuery);
4. OPTIONS
zoomStep
- How much the zoom changes for each mousewheel click - must be a positive number
- Default: 0.1
- Example:
$("#image1").imgViewer("option", "zoomStep", 0.05);
- Get/Set the current zoom level of the image - must be >= 1
- Default: 1 (ie the entire image is visible)
- Example - to display the image magnified 3x:
$("#image1").imgViewer("option", "zoom", 3);
- Controls if image will be zoomable
- Default: true
- Example - to disble image zooming:
$("#image1").imgViewer("option", "zoomable", false);
- Callback triggered by a mouseclick on the image
- Default: null
-
Callback Arguments:
- e: the original click event object
- self: the imgViewer widget object issuing the clik event
- 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, self) {
var pos = self.cursorToImg( e.pageX, e.pageY);
$("#click_position").html(e.pageX + " " + e.pageY + " " + pos.x + " " + pos.y);
});
- Callback triggered after the image has been redisplayed
- Default: null
-
Callback Arguments:
- e: always null
- self: the imgViewer widget object issuing the update notice
- Example - to display the relative image coordinate at the centre of the view:
$("#image1").imgViewer("option", "onUpdate", function(e, self) {
var pos = {
relx: self.vCenter.x/$(self.img).width(),
rely: self.vCenter.y/$(self.img).height()
};
$("#centre_position").html(pos.relx + " " + pos.rely);
5. METHODS
cursorToImg
- Convert page pixel coordinates to relative image coordinate for the current view and zoom
-
Arguments:
- pageX: x coordinate in pixel(page) coordinates
- pageY: y coordiante in pixel(page) coordinates
-
Returns javascript object with relative image coordinates (relative image coordinates range from 0 to 1 where 0,0 correspondes to the topleft corner and 1,1 the bottom right):
- { x: relative x image coordinate, y: relative y image coordinate }
- Returns null if the page coordinate is outside the image viewport.
- Get the relative image coordinates of the current view
-
Returns a javascript object with the relative image coordinates:
- { top: minimum relative y coordinate,
- left: minimum relative x coordinate,
- bottom: maximum relative y image coordinate,
- right: maximum relative x coordinate
- }
- Convert relative image coordinate to a page pixel coordinate for the current view and zoom
-
Arguments:
- relx: relative x image coordinate
- rely: relative y image coordinate
-
Returns a javascript object with the page pixel coordinates:
- { x: the x page pixel coordinate, y: the y page pixel coordinate }
- Returns null if the relative image coordinates are not >=0 and <=1.
- Convert relative image coordinate to a viewport pixel location, ie pixel in the zoomed image
-
Arguments:
- relx: relative x image coordinate
- rely: relative y image coordinate
-
Returns a javascript object with the viewport pixel coordinates:
- { x: the x viewport pixel coordinate, y: the y viewport pixel coordinate }
- Returns null if the relative image coordinates are not >=0 and <=1.
- Convert a viewport pixel location to a relative image coordinate
-
Arguments:
- viewX: x coordinate in viewport pixels
- viewY: y coordinate in viewport pixels
-
Returns a javascript object with the relative image coordinates:
- { x: relative x image coordinate, y: relative y image coordinate }
- Returns null if the viewport pixel location is outside the zoomed image.
- Test is a given relative image coordinate is within the bounds of the current view
-
Arguments:
- relx: relative x image coordinate
- rely: relative y image coordinate
-
Returns
- true or false
- Pan the view to be centred at the given relative image coordinates
-
Arguments:
- relx: relative x image coordinate
- rely: relative y image coordinate
-
Returns a javascript object with the relative image coordinates of the view centre after snapping the edges of the zoomed image to the view boundaries.
- { x: view center relative x image coordinate, y: view center relative y image coordinate }
- Returns null if the relative image coordinates are not >=0 and <=1 and the view is not changed.
