 |
|
 |
|
Location: Blogs Andy's Blog |
|
| Posted by: host |
5/20/2008 8:33 PM |
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! |
|
| Permalink |
Trackback |
Comments (5)
Add Comment
|
Re: DeepZoom for eCommerce
|
By Anonymous on
5/22/2008 10:48 AM
|
|
A good example of why I woudl wantto use Depp Zoom (and Silverlight) for a site.
|
|
|
Re: DeepZoom for eCommerce
|
By Anonymous on
5/27/2008 5:17 AM
|
|
great stuff, could this be the first deployment of deepzoom in an ecommerce app spotted in the wild :-)
|
|
|
Re: DeepZoom for eCommerce
|
By Anonymous on
1/12/2010 6:38 AM
|
|
Andy, the site wssmithers.com does not have DeepZoom stuff anymore. What happened? (I am looking to build a e-commerce website like the one in your post above...)
|
|
|
Re: DeepZoom for eCommerce
|
By Anonymous on
1/12/2010 7:29 AM
|
We did the site as a proof of concept, and used it for awhile but the small company ran out of inventory :) I never got a chance to create a better process to add new photos for it, so it was hard to add in new inventory, and required detailed photos with a light box for each item. So unless you're selling fairly high ticket items, the process may be too expensive.
Anyway, here is the old site, if you're interested:
http://beaulieua.brinkster.net/InteractiveGallery/tabid/128/Default.aspx
-Andy
|
|
|
Re: DeepZoom for eCommerce
|
By Anonymous on
1/12/2010 4:15 PM
|
Thanks for the quick reply Andy. Can you comment on the best process available right now to add in new inventory?
(I posted the above question on silverlight.net forums - http://forums.silverlight.net/forums/t/155393.aspx
I would appreciate your comments on the proposed solutions...)
|
|
|
|
 |
|
 |
|
|