Download
Download the ZIP file which will contain- zoomr.swf, the iZoomr Flash SWF file
- encode.php, a sample PHP encoding script
How it works
iZoomr takes a large source image and creates multiple versions, each at separate resolutions. The resolutions range from 32x32 pixels to 10,000 x 10,000 pixels. However, you can change these at will. I currently use ImageMagick and the native tools in PHP to scale the image to these different resolutions.iZoomr chops these images into cells of a fixed size. Currently I use 256x256 but this, too, can be changed in the code.
Finally, iZoomr stores the images on a server as well as metadata information describing the image cells, the corresponding resolution image that they belong to, as well as the original image data.
Technical details
Use the following embed code to add the zoomable image to your site:
<embed src="zoomr.swf" quality="high" bgcolor="#0c0c0c"
width="WIDTH" height="HEIGHT" name="zoomr"
allowFullScreen="true"
type="application/x-shockwave-flash" flashvars="zid=ZID&base=BASEURL"/>
This embed tag contains four items that you need to replace:
- WIDTH - specify the width for the iZoomr widget
- HEIGHT - specify the height for the iZoomr widget
- ZID - specify the image "id" to show
- BASEURL - specify the base URL where image data is stored
ZID/image.xml
This is an XML file summarizing all resolutions that are available for the image, as well as the original image dimensions. An example is seen below. This image was originally 792x1728 pixels. We have created seven different versions, ranging from 32x32 to 2048x2048 pixels. Each resolution includes the x (sx) and y (sy) scaling factors for the original image. At 2048x2048 pixels, the scaling is 1.0 which means the original image fits within a resolution fo 2048x2048. The zooming effect you see when you zoom further is done by Flash.<?xml version="1.0" encoding="UTF-8"?> <image width="792" height="1728"> <resolution src="32.xml" size="32" sx="0.018518518518519" sy="0.018518518518519" /> <resolution src="64.xml" size="64" sx="0.037037037037037" sy="0.037037037037037" /> <resolution src="128.xml" size="128" sx="0.074074074074074" sy="0.074074074074074" /> <resolution src="256.xml" size="256" sx="0.14814814814815" sy="0.14814814814815" /> <resolution src="512.xml" size="512" sx="0.2962962962963" sy="0.2962962962963" /> <resolution src="1024.xml" size="1024" sx="0.59259259259259" sy="0.59259259259259" /> <resolution src="2048.xml" size="2048" sx="1" sy="1" /> </image>
Resolution files
The <resolution> tags within image.xml contain a SRC attribute that refers to an additional "resolution file." A sample resolution file is seen here:<?xml version="1.0" encoding="UTF-8"?> <grid resolution="512" width="792" height="1728" sx="0.2962962962963" sy="0.2962962962963"> <cell src="i_512_0.jpg" u0="0" v0="0" u1="792" v1="864"/> <cell src="i_512_1.jpg" u0="0" v0="860" u1="792" v1="1724"/> <cell src="i_512_2.jpg" u0="0" v0="1720" u1="792" v1="1728"/> </grid>A resolution is described as a "grid" in XML. Each grid specifies its resolution, here as 512x512 pixels. It also specifies the original width and height of the image, here seen as 792x1798 pixels. In addition it specifies how much the X dimension has been scaled (sx) as well as the Y dimension (sy) from the original image.
A grid consists of several cells. Each cell has a source image, src, that is assumed to be relative to the pathname ZID. Each cell also specifies the upper left and lower right coordinates of the cell in (u,v) space. In this space, (0,0) corresponds to the upper left of the source image. The space extends the entire width (w) and height of the source image, in pixels.
The upper left is specified as (u0,v0) and the lower right is (u1,v1) for every cell. This allows for you to experiment with different tesselations, or ways to chop up an image.
Cell images
Cell images are stored within the ZID directory of BASEURL. Here are some sample images from the space shuttle:Resolution 512x512, (0,860) to (792,1724)
Resolution 4096x4096, (756,756) to (1012,1012)
