Jeep 360 + Colorizer

One of first major JS projects was to convert the old 2010 flash 360 view of the Jeep into JavaScript.

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.

<li id="r0_c4" class="swatch" style="background-position: -84px 0px">
      <a name="&amp;lid=bright_white&amp;lpos=colorizer_tile" href="javascript:;" id="bright_white">Bright White</a>
</li>

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!

This entry was posted in JS projects, Javascript. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>