How to use DeepZoom in your website


Today a good friend asked me about how to use DeepZoom feature in your own website, so I figured this could be a good blog post. I had previously fiddled around with DeepZoom with Silverlight 1.1, but now that some time has passed…Silverlight 2 has been released, and DeepZoom has been enhanced. Here are my findings:

For Non Developers

1) If you’re not a technical person, there are a few options. Firstly you can use Microsoft’s DeepZoomPix website to upload your images, and it will do the generation for you. You can view your images in a very snazzy viewer! You only need a Windows Live ID to get an account. Once you have created an account, created an album and upload your picture, you can click the “Share” link and you can copy and paste the code into your website using in an iframe.

deepzoompix_share

Do take note that this site will close down on December 31st 2009, along with all your albums. Also, the users coming to your site will also be required to install Silverlight 2 runtime on their machines.
You can also try PhotoSynth which not only uses DeepZoom but stitches your photos into a fancy 3-D space. Definitely worth investigating!

2) The second option requires the use of Deep Zoom Composer tool. Scroll down to the section below to understand how to use it. Once you have understood how to export your images using Export to “Images” option, you will find the following output structure in your output location.

  • dzc_output_files folder
  • dzc_output.xml
  • SparseImageSceneGraph.xml

Upload these files and folder into your website. Once you have done that, you can use this webpage to generate your embedding code for your website.

seadragon_embed

I’m not entirely sure about the file it expects, but I reckon you have to put the url of the uploaded dzc_output.xml file, perhaps something like this….http://yourwebsite.com/files/dzc_output.xml. It should generate the embedded code for you to use in your webpage.

For Developers

Firstly you will need to download Deep Zoom Composer. It’s an application that allows you to create your own Deep Zoom images. Start up the application.

1) Import your photos.

deepzoomcomposer1

2) Compose your picture. You can place any many pictures (or just 1) as you like, and this will be your final product.

deepzoomcomposer2

3) The last bit is to export. You have 3 options, under “Output Type”. You can select Images, Silverlight Deep Zoom, Seadragon Ajax. Also do select an appropriate output location, so you can find it easily.

deepzoomcomposer3

Explanation of output types:

  • Images: This will generate only the images needed for DeepZoom, and you only do this when you know what you are going to do with it. E.g. you’re going embed a viewer to display them, or import them into your Silverlight solution and display it with a MultiScaleImage control.
  • Silverlight Deep Zoom: This creates a Silverlight Solution file and projects for you, ready to be used in Visual Studio 2008. You will find a ClientBin folder, where there are generated images and a .XAP, a HTML file and Silverlight.js. There’s also a Silverlight project that references the DeepZoom with helper files (event handling for mouse), and a Page.xaml. If you run this in VS2008, you will see your DeepZoom Image displayed perfectly in a nice viewer.
  • Seadragon Ajax: I really like this option (it was missing in the previous version of DeepZoomComposer), because it generates DeepZoom functionality without the need for Silverlight runtime on your host machine. The same functionality is implemented entirely in Javascript, very nicely done. When you choose this option, you will get your generated images, along with a seadragonajax.html file. If you run this HTML file on your browser, you will see your DeepZoom Image working in a nice viewer. So how do you put this on your own website…see below for my suggestion.

Seadragon Ajax

Firstly you upload your generated images (along with the xml files) into your website. If you edit the generated seadragonajax.html, there quite a some code in there, and can be a little daunting. There’s a bunch of CSS styling code in there, but you only need to take note of a few important things to get DeepZoom to work.

<script type="text/javascript" src="http://seadragon.com/ajax/0.8/seadragon-min.js"></script>

<script type="text/javascript">
    var viewer = null;

    function init() {
        viewer = new Seadragon.Viewer("container");
        viewer.openDzi("GeneratedImages/dzc_output.xml");
    }

    Seadragon.Utils.addEvent(window, "load", init);
</script>

This code should be placed in your <head>section. As you can see, it’s referencing a Javascript, and we are creating a viewer to host the DeepZoom images, and setting it up on Window load event. Do take note of Line 8, that should be replaced with the right folder path (where “GeneratedImages/dzc_output.xml” lives on your website).

<div id="container"></div>

Lastly, make sure you have the <div> element in your <body> where you want to place your DeepZoom Image. The id should match whatever you put in Line 7 in the snipplet above, in this case it’s “container”. If you did not specify a style for your <div>, you should so that you set the right height and width for it. For simplicity, you can copy the code in the above snipplets, and the CSS code in seadragonajax.html, and you should be good to go.

I hope this has helped, pity I can’t showcase this on my blog, due to restriction imposed by wordpress forbidding the use of javascript and iframe. Take a look at this page that uses Seadragon Ajax. Feel free to drop me a feedback/comment, especially if something in this post is wrong. Happy coding! 🙂

Share this post:
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: