Magento product image change on color selection
In: Magento
29 Sep 2008This 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)
Comment Form
About this site
Welcome to ActiveCodeline. My name is Branko Ajzele. I'm 26-year-old, currently working as full time PHP web application developer at Inchoo (in partnership with Surgeworks). My special interest and expertise evolve mainly around Zend Framework, Doctrine ORM, Magento eCommerce platform and few other related technologies.
More about me?
- Uwe Stoll: Thanks for your valuable advice. Furthermore, I found it be important to use the backend generated [...]
- Danny: Ah. I think I figured it out.. But 1 thing.. How can I have it appear at just the home page and on t [...]
- Danny: I've set everything up as instructed on this page, but it still doesn't show up on the front page... [...]
- Chris: [code] true local [/code] [...]
- Chris: Looks like the author forgot to include a pool to which the code comes from. local or community. [...]
- Issues with moving Magento from one server to another
- Oxid shop and Apache mod rewrite installation issues
- Drupal Zend Framework autoloader module, ActiveCodeline_ZendFrameworkLoader
- Utilizing Magento notification system
- 5 years of Packt Publishing
- EntityExtender - Extend all Magento entity objects at once
- How to create Magento REST server extension
- Magento alternative, Oxid?
- Taking Flex quite seriously
- Busy busy busy
13 Responses to Magento product image change on color selection
Roy Rubin
September 29th, 2008 at 2:56 pm
Great work. Thanks for sharing your techniques with the Magento Community.
Roy / Magento
Ross Kendall
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.
@malbiniak
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!
branko
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…
Create a Color Switcher in Magento | Inchoo
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 [...]
Sherrie
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
hisham
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
Shailesh
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
Chris Jang
December 15th, 2008 at 2:14 am
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?
branko
December 15th, 2008 at 2:18 am
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.
dimpbizkit
May 6th, 2009 at 11:49 pm
I am implementing this stuff in a magento store but i saw the combobox select_3 you use on the example is not always _3… did u see that?
branko
May 7th, 2009 at 1:29 am
@dimpbizkit This is relatively old article now
Plus its merely an example. You can modify view file form template folder that outputs the select box then attach some meaningful id and classes under some condition.
dimpbizkit
May 7th, 2009 at 9:38 am
Yea… I went to the core and set fix the select id… that fix it for me… i know its not the best but works till now…
Thanks anyway…