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)
September 29th, 2008 at 2:56 pm
Great work. Thanks for sharing your techniques with the Magento Community.
Roy / Magento
September 29th, 2008 at 2:57 pm
Hi Branko,
Thanks for your screen-cast. I think it’s an idea a lot of people will be interested in, and I’m sure I’ll have a go at it myself.
Cheers,
Ross.
September 30th, 2008 at 8:42 am
(please delete my previous comment. sorry for getting your name wrong. i need coffee!)
Hi Branko,
Thanks for sharing this. Once we ramp up a little further, I could definitely see using this (heavily). Do you have any plans to maintain it? I haven’t looked at the package, yet, but if it’s well documented, I’d pay for a license.
Just saying…
Regardless, thanks for sharing!
September 30th, 2008 at 8:51 am
Thank you all for positive feedback.
If I understood you, malbiniak, I’m gonna have to disappoint you… for now
this is not module, just a simple jQuery plus few lines of code inside the media.phtml file. However, i might put it into some module so people can download it.
You even don’t have to use jQuery. Just pickup on the logic it does and implement it in some other JS framework (Prototype is already built in Magento).
However, it could be much more useful for broader community if this was built into some module. I’ll try to work on it, if someone does not beat me to it
I’m quite busy these days, moving to new apartment and waiting for DSL line to be installed in it. Until then, I’m somewhat limited with resources
Besides, there is still a loooooot about Magento for me to learn.
All the best…
September 30th, 2008 at 12:12 pm
[...] I’ve made a screencast on my site on this subject, with somewhat different title. The idea is to have a dropdown box from [...]
October 21st, 2008 at 2:28 pm
Thank you so much! I have this functioning, but ran into a small problem. How can I make this work when the attribute is two words? ie. Cool Grey
October 27th, 2008 at 12:54 am
Hi,
is it possible to change the dropdown option to image choose just like shown here on Gap website
http://www.gap.com/browse/product.do?cid=11486&pid=560322&scid=560322002
November 8th, 2008 at 1:48 am
Plz help… I am stuck here
I want to change image on click of view male OR view female which can be shown in below link
catalog
In this issue js and all the things are working and i code it in to view.phtml
Now my problem is that, i can’t get male model product image path for view male image. I had uploaded it in product with male and female label respectivly