Tutorial: Adding a Deep Zoom Image to a SharePoint 2010 Site

In my previous blog entry (part of the CodePlex Corner Series) I mentioned that I’d write a tutorial on how to add a Deep Zoom Image to a SharePoint site with the Seadragon Viewer web part. These are the notes I’d taken when I was playing around it. I’ve tided them up and they will guide you through the process of web part installation, image creation and how to bring these together.

Applies to

  • SharePoint 2010 (All Editions)


You’ve got a large image that you want to distribute to some colleagues. But the image size makes it unwieldy to distribute via email. Instead, you’d like to provide an online capability where your users can interact with the image without losing image integrity. An example of Deep Zoom technology in use can be seen on the SharePoint 2013 architecture diagrams. This solution has a few components, namely: –

  • Seadragon Ajax Viewer Web Part (hosted on CodePlex)
  • Deep Zoom Image Composer
  • A large resolution image

Downloading and installing the web part

First we’ll begin by downloading and installing the web part. We won’t worry too much about configuring it at the moment; all we’re concerned with is getting it onto your servers. These steps should be done from one of your WFE Servers: –

  1. Navigate to the Downloads page of the CodePlex project. The SeaDragonViewer.wsp is the recommended download at the top of this page
  2. Create a folder on your C drive called C:\Web Parts and download the WSP file to this directory
  3. Open the SharePoint 2010 Management Shell via Start à All Programs à Microsoft SharePoint 2010 Products à SharePoint 2010 Management Shell. Right-click on this and select the Run as Administrator
  4. Once this has loaded. Run these PowerShell Commands. The first command installs the solution; the second command deploys it and makes it available for selection within your SharePoint installation.
    1. Add-SPSolution “C:\Web Parts\SeaDragonViewer.wsp”
    2. Install-SPSolution –Identity SeaDragonViewer.wsp –WebApplication http://YourSite –GACDeployment

Please note that the http://YourSite should be replaced with the URL of your own SharePoint Web Application. Once these steps have been completed, you’ll have the web part ready and installed for use but no image to plug into it. To prepare these, it’s necessary to step back from SharePoint for a moment and to use another Microsoft Tool; the Deep Zoom Composer

Creating DeepZoom Images for use within SharePoint

In this next set of steps we are going to obtain a high resolution image and use a special image utility to prepare this for use within SharePoint. We will then manually tweak the output of the tool to make sure that it’s compatible with the web part that you downloaded and installed earlier.

  1. On your desktop, create a folder called “Sea Dragon Images”
  2. Next, in your browser of choice navigate to morguefile.com. This is a free photo archive that you can use images fairly freely from.
  3. In the search box, type in London and hit enter
  4. Pick an image on the search results page and click on it. You’ll get a properties box that describes the attributes of the file you’ve chosen
  5. Click on the Download button on this attributes page.
  6. This will prompt you to open the file, save it or to cancel the download. Click on “Save” and save it to the Sea Dragon Images folder that you made earlier

At this point, you should now have a folder with one high resolution image contained with it. To make use of this image we are going to install a piece of kit called the Deep Zoom Composer. This is a facility that takes high resolution images and then transforms them into the appropriate format.

  1. Download the DeepZoom Composer from http://www.microsoft.com/en-us/download/details.aspx?id=24819
  2. The download process is quick and painless. Double click the exe and start the installation process. Accept the terms and conditions and follow the wizard through to completion
  3. Launch the Deep Zoom Composer from the start menu. Start à All Programs à Microsoft Expression à Deep Zoom Composer. You’ll be greeted with this screen
  4. Click on New Project
  5. In the New Project Dialog Box that pops up, name the project “London” and save it to the Sea Dragon Images directory that you created earlier and click OK
  6. With these settings in place, the dialog box will disappear and you’ll see a blank canvas. This has also created a London directory within the Sea Dragon Images directory that you will be investigating later
  7. Back on the canvas, look at the top right of the Zoom Composer and you’ll see an “Add Image” button
  8. Click on this and then navigate to the image that you downloaded earlier. Select it and press Ok. You’ll then see the image selected at the centre of the canvas and on the right hand side of the screen under a thumbnail strip
  9. On the toolbar at the top of the page, click Compose
  10. This will take you to the second stage of the composition process. You will see a blank canvas again but this have the London image from the previous step loaded in the thumbnail strip at the bottom of the screen
  11. Drag the London image from the thumbnail to the canvas. It is beneficial here to use the “Fit to Scree” command to make this easier. Do this via
    1. Edit à Fit to Screen
    2. Keyboard Shortcut: Ctrl + O
  12. Once this is done, you should have a screen that looks similar to the below
  13. Click on the Export Tab
  14. This will take you to a new export page where the various export settings can be inspected. On the export settings on the right hand side of the screen select Seadragon Ajax from the Output type options.
  15. Give your export a name and select the export location. By default this will be a folder called “Export Data” within the project directory that was created when the project was initialised
  16. Click Export once you are happy with the settings. You’ll see these options at the end of export process
  17. Click “Preview in Browser” to see how this will look in your SharePoint site
  18. Once you’ve done inspecting your work in the browser, click on the View Image Folder. You’ll see something similar to the image below. The file path will be …/Exported Data/London/GeneratedImages

Let’s inspect these files before moving on. Some changes will be needed to them shortly but it always helps to know what these are before altering them

File / Directory Name



Directory containing the zoom images


XML file that dictates the zoom template size and format


XML file containing the instructions and calculations for the images


XML file that stipulates the zoom ratio, image path and background colours


The two items that we want to pay attention to here are the dzc_output_files directory and the dzc_output.xml. These are the files that the Seadragon Viewer web part needs to talk to. These next steps will show you how to combine your image output and the web part.

  1. In the Generated Images directory generated by the Deep Zoom Composer rename the dzc_output_files directory and the dzc_output.xml to London.
  2. Once these files have been renamed upload the entire directory and the xml files to a SharePoint document library. Right click the London.XML file and copy the shortcut
  3. Back in your SharePoint environment, navigate to the root site of the web application that the web part was installed to
  4. Access the Site Collection Features via Site Actions à Settings. This will load a new screen
  5. On this new screen, look for the Site Collection Administration heading and click on the Site Collection Features under it. This will also load a new page
  6. On this page, search for the SeaDragonViewer Feature1 and activate it. This adds the web part to the web part gallery for all sites within this site collection
  7. Now that the part is available, navigate to the page or site where the Seadragon viewer is to be added. When selecting the web part it will be grouped under the Innovation category
  8. Once the web part has been added, enter the configuration options (Edit Page à Edit Web Part) and look for the miscellaneous section. This will have three configuration options: –
    1. XMLPath: This is where the URL for the renamed XML file needs to be placed
    2. WPWidth: Setting for the Web Part Width
    3. WPHeight: Setting for the Web Part Height
  9. Paste the link of the XML file that you copied earlier into the XML Path field and press Apply / OK
  10. You will now have a web part with a high resolution image that you can zoom into and pan around without any loss of quality



One thought on “Tutorial: Adding a Deep Zoom Image to a SharePoint 2010 Site

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s