Magento product image change on color selection

This screencast guides you trough the process of creating a Magento product image change based on color selected in dropdown option. It uses simple jQuery to achieve this functionality.

Sorry for not implementing the video player in site. I am having some minor issues with the wordpress flash player plugin. Hope to fix this soon. In a meantime you can download .swf file provided and watch it on your computer. I tested the video in Media player classic and it works just fine so if your favorite player gives you some trouble, try this one.

Download video MagentoProductColorChooser.swf.

I added the jQuery dropdown logic in special zip file for you to download (dropdown) in case you don’t want to write all the code from scratch. Just be sure to pay attention to id and classes used in my jQuery sample and yours.

And for the media.phtml file, this simple line is the magic one

<img src=”<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” alt=”no image” id=”productImg<?php echo $this->htmlEscape($_image->getLabel()) ?>” />

There is also the div element wrapping all that, you’ll see it in the screencast.

Hope you find this useful. Feel free to provide some feedback (comments)