This is going to be a real quick one, because its just so easy to do!

What you will learn in this tutorial is how to create a cool little deep zoom gallery in silverlight 2.

http://www.agkdesign.net/DZ_col.html – That’s my really quick example which I haven’t had time to add the styles to yet, but you get the idea.

Ok so first things first, I’m assuming you all have the silverlight engine installed on your computer? No?
well then I guess we better get that sorted out first.

http://silverlight.net/GetStarted/ – Go there and you should find all the tools you need to get silverlight running on your computer.

You want the runtime on the left and the Deep Zoom composer on the bottom right.

Ok so now we should have all the tools we need to create a cool little gallery.

So install and open up your deep zoom and gallery, and you should pretty much be able to figure it out from here, but I will step you through it just in case.

Hit “New project” on the splash screen and your straight into it.

Deep Zoom Composer is broken down into 3 simple steps.

And they are as simple as they seem.

Step 1 – Import

Click Add Image in the top left corner, select the photos you want in your gallery. They will show up on the right hand column when they are loaded.

Step 2 – Compose

Pull you imported images from the side bar and lay them out on the page as you want them to look

Step 3 – Export

Give it a name, select the location you want it to export to, I usually select “export as collection” because I have had a few troubles exporting a collection and it working in firefox 2, it seems to be something to do with running it on IIS, because it works well locally, and the last selection is export images and silverlight project.

Hit export and off it goes.

Now here is the fun part!

Adding your new DZ gallery to your website.

So if you navigate to the location you saved it, you will find a whole bunch of files in there, Now if you want to edit it in expression blend, make sure you have Expression Blend 2.5 March preview because your Deep Zoom application will be Silverlight 2, and anything before 2.5 doesn’t support it.

Projectnamesource imagesOutputSdiOutputnameDeepZoomOutput.sln is the file you will need to open to edit the XAML and what not in blend.

Ok so you finished doing that, what now?

well next go into the DeepZoomOutput_Web folder and in there you will find 2 files and a folder, Client Bin, DeepZoomOutput.html and a web.config file. These are the files you need to throw into your web page so grab them out and put them into your web page folder. You can rename the HTML document to what ever you like.

Now I hope your pretty cluey with HTML because I’m not going into detail about how to implement the CSS and what not to your gallery, but if you open the html file up, you should see where everything sits. Make sure you leave the #silverlightControllerHost style where it is, but the other ones shouldn’t matter to much. Just don’t touch the Javascriptfunctions and build the rest of your site around the Div called SilverlightControllerHost.  

Should look somthing like this:

 
<div id=”silverlightControlHost”>
  <object data=”data:application/x-silverlight,” type=”application/x-silverlight-2-b1″ width=”100%” height=”100%”>
   <param name=”source” value=”ClientBin/DeepZoomOutput.xap”/>
   <param name=”onerror” value=”onSilverlightError” />
   <param name=”background” value=”white” />
   
   <a href=”
http://go.microsoft.com/fwlink/?LinkID=108182” style=”text-decoration: none;”>
        <img src=”
http://go.microsoft.com/fwlink/?LinkId=108181” alt=”Get Microsoft Silverlight” style=”border-style: none”/>
   </a>
  </object>
  
    </div>

And you will notice this piece of code as well, that’s to throw errors onto the page when there is a problem, if its working you can get rid of it.

    <!– Runtime errors from Silverlight will be displayed here.
 This will contain debugging information and should be removed or hidden when debugging is completed –>

 <div id=’errorLocation’ style=”font-size: small;color: Gray;”></div>

 

Basically that’s it, have fun with it, and also try putting images inside other images, that’s where the real fun with deep zoom comes in!

Hope this was helpful, and if you have trouble, let me know, also send me a link of any cool deep zooms you make! Would love to see them!

Advertisements