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)
Great work. Thanks for sharing your techniques with the Magento Community.
Roy / Magento
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.
(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!
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…
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
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
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
Thank you so much!! I really need this function but If I insert option price with custom option, This function is not working.
How can I fix this?
Check the javascript… when you add the price to custom options then you need to trim and cut some stuff off with js in order for it to work. It’s actually a JavaScript thing.