MS Live Labs have been playing with the “deepzoom” technology, and for those without silverlight installed, you naughty people, you can now create a deepzoom image that can be navigated in Javascript, cool eh ? They call it Seadragon Ajax after the original technology name before the marketing people got to it 😉 (Bill Crow pointed this out to me as I had mis-named it Ajax DeepZoom, The title remains the same as it gets the poitn acros to anyone not aware of the Seadragon name).

The link to the post detailing this explains pretty much what I just did then you can go and embed the Image.  Now its a little tricker than they explain so here is some more details.

Now there are two ways to go here

1. Create your own deepzoom file in the composer and host it yourself, (which you can go figure for yourself)

2. Host it on the photozoom site (free). 

Its photozoom I’ll tell you how to use.  First you will need a large photo (or small but then whats the point) in my case I took seven photos of the same tree with an exposure lock and stiched them all together using Windows Live Gallery.

Upload your big photo to photozoom (create an account etc follow instructions onscreen) it may take some time to appear but it will.

So have fun looking at your silverlight version but to make this work, click on the “View Individual Photos” then click the photo itself, at the bottom of the page is a section called “DeepZoom Image File” its an xml file and is what you want.  If you follow the instructions on the labs site you will get it wrong, cos they forgot to tell you the extra step (at time of writing).

Mine is http://photozoom.mslivelabs.com/DZ/1/zcc6bc1ea8fb746409a678f8814887e9a/collection_images/0.xml if your looking to quickly knock this up.

Now go to the embed viewer create bit here, paste in the Url and click build embed.

Its that simple, now you can paste the HTML into your blog post, like the one below

http://ahref=Seadragon.embed(“400px”, “300px”, “http://photozoom.mslivelabs.com/DZ/1/zcc6bc1ea8fb746409a678f8814887e9a/collection_images/0.xml”, 5373, 7773, 512, 0, “jpg”);

As you can see you can tweak the size yourself and here is mine.

http://seadragon.com/ajax/embed.js

Advertisements