Pans and zooms images while loading additional detail on the fly.
JavaScript PHP HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
LICENSE
README.md
gulpfile.js
index.html
node_modules
package-lock.json
package.json

README.md

useful.zoom.js: Pan and Zoom an Image

Pans and zooms images while loading additional detail on the fly.

Try the demo.

How to include the script

The stylesheet is best included in the header of the document.

<link rel="stylesheet" href="./css/useful-zoom.css"/>

This include can be added to the header or placed inline before the script is invoked.

<script src="./js/useful-zoom.js"></script>

How to start the script

var zoom = new useful.Zoom().init({
	'element' : document.getElementById('zoom'),
	'tileSource' : 'php/imageslice.php?src=../{src}&left={left}&top={top}&right={right}&bottom={bottom}&width={width}&height={height}',
	'tileCache' : 128,
	'tileSize' : 128,
	'allowRotation' : false
});

tileSource : {url} - A webservice that provides image tiles (PHP example included).

tileCache : {integer} - The amount of tiles that can be active at one time. Reduce this to save memory at the expense of bandwidth.

tileSize : {integer} - The horizontal and vertical size of each tile in pixels.

allowRotation : {boolean} - Enable or disable rotation as well as pan and zoom.

How to control the script

Transform

zoom.transform(transformation);

Applies a set of transformations all at once in an animated manner.

transformation : {left, top, zoom, rotate} - An object containing transformations to apply at once.

  • left - Offset from the left as a fraction between 0 and 1.
  • top - Offset from the top as a fraction between 0 and 1.
  • zoom - Zoom factor.
  • rotate - Rotation in degrees.

moveBy

zoom.moveBy(x,y);

Moves the canvas by a set distance instantly.

x : {float} - Offset from the left as a fraction between 0 and 1.

y : {float} - Offset from the top as a fraction between 0 and 1.

moveTo

zoom.moveTo(x,y);

Moves the canvas to a set position instantly.

x : {float} - Offset from the left as a fraction between 0 and 1.

y : {float} - Offset from the top as a fraction between 0 and 1.

zoomBy

zoom.zoomBy(factor);

Magnifies the canvas by a set distance instantly.

factor : {float} - Zoom factor between 1 and as high as the bitmap allows.

zoomTo

zoom.zoomTo(factor);

Magnifies the canvas to a set position instantly.

factor : {float} - Zoom factor between 1 and as high as the bitmap allows.

rotateBy

zoom.rotateBy(angle);

Rotates the canvas by a set number of degrees.

angle : {float} - A rotation between 0 and 359.

rotateTo

zoom.rotateTo(angle);

Rotates the canvas to a set number of degrees.

angle : {float} - A rotation between 0 and 359.

How to build the script

This project uses node.js from http://nodejs.org/

This project uses gulp.js from http://gulpjs.com/

The following commands are available for development:

  • npm install - Installs the prerequisites.
  • gulp import - Re-imports libraries from supporting projects to ./src/libs/ if available under the same folder tree.
  • gulp dev - Builds the project for development purposes.
  • gulp dist - Builds the project for deployment purposes.
  • gulp watch - Continuously recompiles updated files during development sessions.
  • gulp connect - Serves the project on a temporary web server at http://localhost:8500/ .

License

This work is licensed under a Creative Commons Attribution 3.0 Unported License. The latest version of this and other scripts by the same author can be found at http://www.woollymittens.nl/