Before we start to learn “How to add Seadragon to your ASP.NET aspx page” you need to know how to create DZI/DZC xml file and deepzoom content. You can see how to create the same at my prior blog
Using Expression Web 3 and Deepzoom Composer for Silverlight and Ajax Seadragon.
- Create ASP.NET website if you have not created one yet.
- Create deepzoom content and DZC xml file, and drag drop content to your website’s Solution Explorer.
You will see Content folder “dzc_output_files” and dzc output xml file “dzc_output.xml” added to your website.
- Now add “aspx” page to your website.
- Copy and paste following code in <Head></Head> tag. Name of file “dzc_output.xml”. may change if you give some other name in your DZC project in DeepZoom composerChange name in JS function openDzi(<DZI output xml file>) accordingly.
<%--cssStyle for the container that will hold your seadragon--%>
<style type="text/css">
#container
{
width: 500px;
height: 400px;
background-color: black;
border: 1px solid black;
color: white; /* for error messages, etc. */
}
</style>
<%--you can download following js file and use it from your project folder.
This file also contents handler for mouse wheel tracker for image zoom and zoomout effects
that you won't get directly if you use seadragon from ajaxtoolkit xml based syntax in asp.net
My opinion is that, you should download it/copy it and then use so you can work even when you are not connected to internet.--%>
<script type="text/javascript"
src="http://seadragon.com/ajax/0.8/seadragon-min.js">
</script>
<script type="text/javascript">
function init() {
var viewer = new Seadragon.Viewer("container");
viewer.openDzi("dzc_output.xml");
}
Seadragon.Utils.addEvent(window, "load", init);
</script>
- Now copy paste following code in <body></body> tag in your page
<form id="form1" runat="server">
<div id="container">
<%--you will get seadragon here--%>
</div>
</form>
- Thats it you are ready to Go.
- Open the page in browser.
You will see Content folder “dzc_output_files” and dzc output xml file “dzc_output.xml” added to your website. 
0 comments:
Post a Comment