Deepzoom Composer and Expression Web 3 studio. Though i will consider “Seadragon Ajax” control only, but Deep zoom Silverlight is similar. Also I am writing about this control first coz of all controls in ASP,Ajax toolkit or silverlight this was first i liked the most. Now lets start…
1. The DZI file:
This is actually a xml file also known as deep zoom source file. You can use a tools to create a Deep Zoom source file (for example, Deep Zoom Composer or Photosynth, i guess DeepZooom Composer is pretty eazy). If you are interested in learning more about schema of this file visit here. You can also download its xsd from here.In simple words, Idea is, if you zoom the picture, not whole picture is required to be seen in the window. Images in Deep Zoom are represented by a tiled image pyramid. After creating dzi file in Deepzoom composer you will find many(10) folders in it with pieces of the picture and same picture in different sizes in those folders. Those folders have numbers that specifies levels. Now, Levels specify resolution of picture. Ok enough for DZI and image pyramid level details now. We have got enough info needed to create dzi file.
Creating dzi or dzc in DeepZoom Composer :
- Install deepzoom composer, download it from here. Mentioned link provide the required info to install and use composer to create deep zoom content, I am using same content to explain. but i will explain with images here :P .
- Go to deep zoom composer and create a project.
- Select the Import tab and add the image file you want to convert to a DZI or DZC image by clicking “Add” and browsing for image file.
- Select the Compose tab and drag the source image from the Images below to the layout area.
- Select the Export tab.
- Select output type in right panel as Seadragon or Silverlight Deep Zoom as required, Name the content, select location whre you want to place the content by clicking on “Browse” . In Export option we are not conserned with use of multiple images so single image composition will be selected by default.
- Click the Export button.
You can preview same in browser by clicking on Preview option once export is complete. Now the deep zoom content is ready to be used. Using Expression Web Dev3 Studio : Expression Web Dev 3 studio you need to purchase … :( …
- If you are new to Expression Web studio, you’ll have to know how to create website project directory, before reading further. Easiest way to do it is watch this.
- Create Website, or in existing website, Open page in design mode now, Expand “Media” tree in Toolbox tab.
- Drag and Drop “Deep Zoom” on page, browse window will open where you will have to select deep zoom content source file, the xml file we create earlier.
- Insert Deep zoom options window will appear.
- Select “Seadragon Ajax only” option for Seadragon Ajax. For Silverlight Deep zoom you will have to select “Silverlight only” option.
- Click ok.
- Now click on “Code” view in dev studio.
1: <head>2: <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
3: <link href="Untitled_1.css" rel="-stylesheet" type="text/css" />ignore this
4: <script type='text/javascript' src='javascript/deepzoom/seadragon-min.js'></script><script type='text/javascript'
5: src='javascript/deepzoom/silverlight.js'></script>
6: </head> 7: 8: <body>9: <div id="deepzoomcontainer">
10: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="width:640px; height:480px;">
11: <param name="source" value="deepzooms/dzc_output4/deepzoomproject.xap"/>
12: <param name="onerror" value="onSilverlightError"/>
13: <param name="background" value="white" />
14: <param name="minRuntimeVersion" value="2.0.31005.0" />
15: <param name="autoUpgrade" value="true" />
16: <param name="initparams" value="zoomIn=5"/>
17: <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
18: <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none;"/>
19: </a>20: </object>
21: <iframe id="I1" style='visibility:hidden;height:0;width:0;border:0px;' name="I1">
22: </iframe></div>ignore this
23: 24: </body>- This is Generated code in Expression Web studio.
- You will also find deepzoom content added to your website automatically, don’t have to worry about that work.
0 comments:
Post a Comment