title: Magento Images switcher for custom options
body: <p>I have created a custom options image switcher for Magento, script compares value from options in drop-down with all image names related to product, and finds the most similar one, you can see an example <a href="http://www.i70powersports.com/fox-360-intake-jersey.html" rel="nofollow">here</a></p>
  
  <p>The problem is how to add the "selected" option image to the cart, or better to say how to apply that image instead of the default thumbnail in the cart?</p>
  
  <p>anyway here is the complete code - maybe someone can even find this part useful :)</p>
  
  <pre><code>&lt;?php
  // load all images related to product
  $product = $this-&gt;getProduct();
  $galleryData = $product-&gt;getData('media_gallery');
  
  
  $images_array = array();
  foreach ($galleryData['images'] as $image) {
   array_push($images_array, $image['file']);
  }?&gt;
  
  &lt;?php
  $colour_select_id = '';
  $custom_options_arr = array();
  foreach ($_options as $_option) {
   if ($_option-&gt;getTitle() == 'Helmet Color/Design' || $_option-&gt;getTitle() == 'Color')  {
      $colour_select_id = 'select_' . $_option-&gt;getId();
      $values = $_option-&gt;getValues();
      foreach ($values as $value) {
          $current_option = ($value-&gt;getData());
          $custom_options_arr[$current_option['option_type_id']] = $current_option['title'];
      }
    }
  }
  // $custom_options_arr now holds key=&gt;value pairs of option_type_id =&gt; title
  
  $custom_images_to_output = array();
  foreach ($custom_options_arr as $key =&gt; $value) {
  $best_match = $images_array[0];
  for ($i = 1; $i &lt; count($images_array); $i++) {
      if (similar_text(strtoupper($images_array[$i]), strtoupper($value)) &gt; similar_text(strtoupper($best_match), strtoupper($value))) {
          $best_match = $images_array[$i];
      }
  }
  $custom_images_to_output[$key] = $best_match;
  }
  $base_url = Mage::getBaseUrl('media') . 'catalog/product';
  ?&gt;    
  
  &lt;?php if ($colour_select_id) { ?&gt;
  
  &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function() {
  
          var opt_object = &lt;?php echo json_encode($custom_images_to_output); ?&gt;;
          var base_path = '&lt;?= $base_url;?&gt;';
  
          jQuery("#&lt;?= $colour_select_id ?&gt;").change(function() {
  
              var optionValue = jQuery(this).attr('value');
  
              if (optionValue) {
                  var optionValueText = jQuery.trim(jQuery('#&lt;?= $colour_select_id ?&gt; :selected').text());
                  if (opt_object.hasOwnProperty(optionValue)) {
                      optionValueText = opt_object[optionValue];
                  }
  
                  jQuery("#image").fadeOut(function() { 
                    jQuery(this).load(function() { 
                    jQuery(this).fadeIn(); }); 
                    jQuery(this).attr("src", base_path + optionValueText);
                    jQuery('#image-zoom').attr("href", base_path + optionValueText);
                  }); 
  
             }    
          });
      });
  &lt;/script&gt;
  </code></pre>