Deep Zoom Composer

The LiveLab of Microsoft offers to present images on websites in another way with a zoom function, using the Deep Zoom feature of Silverlight.

Download the demonstration

Use the mouse wheel to enlarge or reduce the image, and move the mouse to shift the image.

Building a zoom

To allow to zoom a picture, download the free editor, Deep Zoom Composer and perform 4 steps:

  1. Create a project.
  2. Import: Add an image of your choice.
  3. Compose: Place the image in the composition space by dragging frome the right panel. Enlarge the image. This space will be unchanged in your Web page.
  4. Export: Generate the necessary files.

At the time of export, you are proposed to use the PhotoZoom Microsoft site which requires opening an account, or to export to Silverlight. The second choice seems preferable because it does not depend on an external site. Various options are proposed that are outlined in the PDF manual to download.

How to put your work online

Once the project exported, you have to retrieve the files to place them on your website. Go to this directory: 

your-project-name/source images/OutputSdi/your-space-name/DeepZoomProjectWeb/ClientBin/

We must put online DeepZoomProject.xap files and the whole subdirectory GeneratedImages.

The reader and JavaScript code in DeepZoomProjectTestPage.html must be copied into your page.
The reader to integrate looks like this:

<div id='errorLocation' style="font-size: small;color: Gray;">
</div>
<div id="silverlightControlHost">
  <object data="data:application/x-silverlight," 
     type="application/x-silverlight-2" width="100%" height="100%">
  <param name="source" value="DeepZoomProject.xap"/>
  <param name="onerror" value="onSilverlightError" />
  <param name="background" value="white" />
  <a href="http://go.microsoft.com/fwlink/?LinkID=115261">
  <img src="http://go.microsoft.com/fwlink/?LinkId=108181"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>

Copy the code into the page where you want to show the image.

Beyond DZC

Other tools exist to add zoom effects on web pages.

See the list of mapping tools for more infos.