This library provides a browser client with an interface to pan and zoom an image that is much larger than the screen, fetching tiled sections on demand. As one edge of the image moves off the screen in one direction, new portions of the image appear on the opposing side. Using this type of interface allows the image being viewed to theoretically be infinite. As such, the taxation on the network connection is minimized tremendously by the fact that only portions of the image are needed at any given time.
In order to use this library, it is necessary to first generate the tiles for your image. For that, the tilemaker.py python script can be used. This script requires the Python Imaging Library (PIL) module. The script performs two primary functions. It creates tiles of the given size for the 1:1 resolution and also for each power-of-two scaling until the whole image fits within the given size of a single tile. This progressive scaling provides the zoom out capability in the interface. (Please note that padding will likely be applied to the image to make it square and mathematically perfect)
The following snippet will take the file canvas.png and generate 256 pixel tiles at png quality 9. The filename pattern allows for customization of the output, but is often left as is. The tiles are put in the current working directory.
python tilemaker.py -s256 -Q9 -t"tile-%d-%d-%d.png" -bFFFFFF -v canvas.png
Once the tiles are generated, it is time to setup the webpage for displaying them. There are several crucial components required to make the viewer work. The example index file provided with the library demonstrates these inclusions.
<script type="text/javascript" src="PanoJS.js" />
<link rel="stylesheet" href="panojs.css" />
<div id="viewer">
<div class="well"><!-- --></div>
<div class="surface"><!-- --></div>
<p class="controls">
<span class="zoomIn" title="Zoom In">+</span>
<span class="zoomOut" title="Zoom Out">-</span>
</p>
</div>All that is left is to initialize the viewer on page load with the settings specific to your environment. This step involves some trickery to get the viewer to initialize itself at the correct time in all browsers, but aside from that logic (which can be found in the example index file), the snippet below we get you up and running.
var viewerBean;
window.onload = function() {
viewerBean = new PanoJS('viewer', {
tileBaseUri: 'tiles',
tileSize: 256,
tilePrefix: 'tile-',
tileExtension: 'png',
maxZoom: 5,
initialZoom: 3,
blankTile: 'blank.gif',
loadingTile: 'blank.gif'
});
viewerBean.init();
}
The only area where you might get tripped up is the maxZoom setting. The maxZoom is dependent entirely on the dimensions of your original image. To determine the maxZoom, look at the tiles and find the highest value of the first digit (tile-5-0-0.jpg). That number is the maxZoom value.
The following is a list of available settings that can be provided in the constructor.
The following options are provided on a global level, many of which are used as fallback values if an override is not provided in the options of the constructor.