How to Create and Publish a Deep Zoom Composition in 5 Easy Steps
Follow these steps to create and publish your own Deep Zoom composition:
Step 1: Download and Install Deep Zoom Composer
Deep Zoom Composer is a tool that allows you to prepare images for use with the Deep Zoom technology. You can download Deep Zoom Composer here.
Step 2: Import Images
Think about the type of composition you like to create and import the source images into Deep Zoom Composer:
For the Mona Lisa Deep Zoom Composition I used a high resolution version of the famous painting as the background and many other images to hide as Easter Eggs.
Step 3: Create Composition
If you like to convert a high resolution image (e.g. panoramic photo, large map etc.) to the deep zoom format all you have to do is click on compose and drag the image from the list of available images to the design surface.
To include multiple images into one composition just zoom into the areas where you like to place the image and drag you images to the design surface. For the Mona Lisa Deep Zoom Composition I also specified menu items. To add a menu item click on menu and drag images from layers to the menu. The Deep Zoom Viewer will display those menu items and automatically zoom to the area where the image is located.
Step 4: Export Composition
Click on the Export Tab and chose a name, location and output type:
For this example I used the default settings. By default the output type is Silverlight Deep Zoom. In this case to view the composition Silverlight is required. If you choose Seadragon Ajax as the output type a Ajax based viewer will be generated that can be viewed even without the Silverlight plugin installed.
Step 5: Publish Composition
To publish the composition all you have to to is copy the files generated by Deep Zoom Composer to a Web Server. There are no special requirements for the Web Sever. Any static HTTP File Server will do. If you do not have access to your own Web Server the easiest way to publish the Deep Zoom Composition is via Dropbox. Get a Dropbox account and copy the files to the public folder of your Dropbox:
To get the public link right click the main html file generated by Deep Zoom Composer and choose copy public link. Your Deep Zoom Composition is now online and can be shared with others.
To integrate the composition into your blog you can use a modified version of the following tag:
<iframe width="570" height="400" src="http://yourserver.com/yourdeepzoom.html" frameborder="0" scrolling="no"></iframe>
By now you have a good understanding and many ideas how to use Deep Zoom Composer. Give it a go and share you links in the comments below. Have Fun!
Related posts
is it possible to compose a deep zoom image dynamically? we are trying to find a way to compose all images of social media users that signs in into a website into one big image. the problem we have is how to recompose the big image automatically everytime a user registers into our website.
any ideas?
Thank you very much for the article! Works great, only problem I run into is that ‘click zooming’ does not function. Is that a limitation of using Dropbox as a server or am I missing an option in Deep Zoom Composer? The top panel of the deep zoom image reads, “click inside to zoom in” but only the actual zoom buttons work. Any help would be much appreciated :)
I exported as a collection using the template – Deep Zoom Navigation (Default).
The uploaded image:
http://davidtribby.com/private/18125126229/tumblr_lzuf6ww8vo1qzm3xz
Hi David, once you click on the embedded deep zoom image you can use your mouse wheel to zoom in and zoom out. I tried it with your deep zoom image and it just works fine. If you like to link to certain areas in your image you can do this as well. You can even add clickable hotspots to your image. Just look at the Mona Lisa sample to see how this is done.
@Sivakumar: Live Labs Pivot & the Silverlight Pivot Viewer are very cool. I am working on a Pivot collection for this blog. The first version is now up and running. Just click on the Explore tab in the top menu. I will post about this soon.
Cool. More interactive Silverlight Pivotviewer
http://vimeo.com/12367414
Silverlight Pivot Viewer from Djonatas Tenfen on Vimeo.