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.
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
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.
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.
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.
2) Compose your picture. You can place any many pictures (or just 1) as you like, and this will be your final product.
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.
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.
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.
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.
|Share this post:|