You can zoom with the mouse either with the scroll wheel - forward to zoom in, backward to zoom out - or by clicking the select button to zoom in. The buttons beneath the canvas can also be used.
It works very well in Firefox 3.0+ and Opera 11+ . It deosn't work in IE (even with Google's excanvas). I suspect it'll work in Safari and Chrome, and I'm working on a Mobile version.
Create your own
The backend part of the system simply consits of several folders full of images of different resolution. The images are most easily generated by the DeepZoom Composer program created by Microsoft, there's also lots of information about the format here. The DeepZoom Composer program currently only works on windows but once you've download it you can create your own zoom images, very quickly.
Once you have it installed create a project (or the local machine, network positions don't work) then choose an appropriate image and import it with "Add Image". Now goto to Export and select Custom. Change output type to "Images", give it a name, select "Export as a collection", ensure "Enable Smooth Streaming Support" is off, Format JPEG, and quality whatever you like (high recommended). Click Export.
Once it's finished open the folder you saved to. Open the subfolder "dzc_output_images", the subfolder ending in "_files" is the one you need to copy to your web server. (If you have a look in the folder you can see you images cut up into smaller sections at different zoom levels).
- ImageLoader.js or minified ImageLoader.min.js (This image loader class is generic enough to be used in any project, like this one).
- CanvasZoom.js or minified CanvasZoom.min.js
and add them to your webpage:
<canvas id="galaxyCanvas" width="600" height="300"></canvas>
var galaxy = new CanvasZoom( document.getElementById('galaxyCanvas'), "Galaxy/tiles/", 6637, 3787 );
The CanvasZoom is called with four parameters:
- The canvas you want to use. (Best results are achieved when the canvas has a similar aspect ratio to the original image)
- The folder where the images are stored.
- The width of the original image.
- The height of the original image.
If you'd like to add some button (or other control) to zoom in and out you can call the class functions "zoomInCentre()" and "zoomOutCentre()". Adapting the above code it would look like this:
<input type="button" value="Zoom in" onclick="galaxy.zoomInCentre()"/>
<input type="button" value="Zoom out" onclick="galaxy.zoomOutCentre()"/>