After several proof of concepts I came up with the one that’s on any jeep.com vehicle landing pages. You can see it in action at: http://www.jeep.com/en/2012/wrangler_unlimited/#model=sahara&color=crush&top=hard_top.
How it was done:
First I had to create a controller, this was done with a script, item_selector.js, that takes a swatch (spritesheet) with all the colors, and automatically moves it to the correct position based on it’s id. For example: “r0_c4″ would move the swatch to 4th column in the first row.
After that was done, all I had to do was listen for click events and grab the anchor id. That id corresponds to the color of the vehicle.
Next was to create the 360 view. This was done by:
- Creating a js loader to load all the images into memory
- Swap out the source of the image
- As you move your mouse, the source changes
It all sounds fairly simple, but it wasn’t! It had to be fast and versatile and we had to have a way to reference images by name (or in our case id). I needed help with all the math and had lots of help from my co-worker Jasper Palfree who helped integrate my PoC into the Frameswitcher script. I’ll release these scripts as Open Source in the near future!