It just so happens my father-in-law is a woodworker who creates some really fantastic pieces and has contemplated selling them online for some time. But limiting the shopper to a few small thumbnail images wouldn't do his work justice.
Enter Silverlight's MutliScaleImage class (aka "DeepZoom"). Chances are you've seen DeepZoom in action on sites like the Hardrock Memorabilia site. DeepZoom provides progressive image downloads with an intuitive navigation system that looks like something out of Minority Report.
So here is the site we pulled together using DeepZoom, Silverlight, and some really impressive wood turnings:
One of the irritations with buying stuff on the web is that you can't hold the item in your hand and really check it out before forking over your credit card info. This can be especially irritating if the item you're looking at is hand-made, such as a painting, piece of pottery, or... a bowl turning! I think technologies like DeepZoom can greatly improve this experience over traditional thumbnail images.
Notice how the site also uses a picture-in-picture type view for some of the pieces, to show different views - such as the item with the top removed:
... the neat thing here is that the smaller picture-in-picture image has all of the detail of the main image.
Shameless Plug: If you are looking for a one of a kind, hand-made gift please browse the site!
Lessons Learned:
It turns out there is a surprising amount of code you need to write yourself to get a DeepZoom implementation such as the one at wssmithers.com. You might expect most functionality would be built into the MultiScaleImage class, but it isn't!
One of the key requirements of the site was to be able to tie the product information (item #, price, etc) from a SQL Server db to the Images in the DeepZoom Composer project. In order to create this relationship, you can use the index # of the subimage as a unique key in the composition.
So first, we handle the ImageOpenSucceeded event of the MultiScaleImage Control:
deepZoomObject.ImageOpenSucceeded += new RoutedEventHandler(deepZoomObject_ImageOpenSucceeded);
... and in that handler we can store the image index along with relevant data (perhaps a ProductId) to tie the image to its data:
Dictionary<string, string> _imageData = new Dictionary<string, string>();
private void deepZoomObject_ImageOpenSucceeded(object sender, RoutedEventArgs e)
{
_imageData.Clear();
for (int i = 0; i < deepZoomObject.SubImages.Count; i++)
{
MultiScaleSubImage subImage = deepZoomObject.SubImages[i];
_imageData.Add(i.ToString(), "You can tie data here");
subImage.SetValue(FrameworkElement.NameProperty, i.ToString());
}
}
There are many other aspects to creating a DeepZoom site such as this which I hope to explain in a future blog post and maybe prepare a talk on the subject!