As well as the high resolution imagery I talked about in my previous posts here and here, another common requirement is for customers to be able to see a 360 degree view of a product. This might be something as sophisticated as a full 3D model representation but in most cases, some sort of carousel-type interface which allows the user to explore different facets of the product will be sufficient.
Here’s a very simple carousel showing my daughter’s latest acquisition. You can rotate the carousel by moving your mouse over the “Rotate” bar and adjust the opacity of the images in the foreground using the slider. The app uses the perspective 3D capability introduced in Silverlight 3 to give the illusion of 3D. In fact 2D elements (in this case the product images) are projected onto a surface in 3D space. It’s very basic and could certainly do with a bit of spicing-up design-wise but it gives you a general feel for what’s easily achievable with Silverlight. We’ll walk through building this app in a how-to.
The images I’ve used here were quickly snapped with my Canon 450D and could be reduced in size significantly for this app. They’re projected at 260×195 (max) while the image resources themselves are 800×533. A bit of pre-work on image reduction could have shaved 80-90% off the image download size. My bad but easily rectified for production
In my next (and final) post in the series, we’ll take a look at a slightly more sophisticated carousel that has some significant visual enhancements.