How to add color picker to swatches?

Question

Hei! I am using magento 1.9.1.1 and also it's watches that I get from color attribute. I love the magento native system and I would like to add to it not replace. I have certain colors for client to order like white or black and but I also have Painting RAL color that should be picked with color picker as an exception. So if you don't want any of basic colors offered you click Painting RAL and choose your color with picker and it counts as your custom swatch or so. Found this plugin https://www.yireo.com/software/magento-extensions/raloption Put it seems to be making a special selector for it and is not to integrating it with swatches.

Any ideas anyone? In spe

Answer 1

So I finally discovered that I have mcolorpicker built into magento ves fashion template and I added missing images, the script and some extra js to make my custom option appear/disappear if to click on swatches. I also change ma custom option input to type color via js cause none of the php solutions worked for me. Doesn't work in safari and probably not IE too, but still...

  jQuery( document ).ready(function() {
  var element=document.getElementsByClassName("product-custom-option")[0];
  var object=jQuery(".product-custom-option");
  object.closest("dl").find('label').css( "display", "none");
   if(object.length) {
   element.setAttribute("type", "color");
   element.setAttribute("value", "#000000");
}
   jQuery.fn.mColorPicker.init.replace = '.product-custom-option';

jQuery('.swatch-link').not(element).click(function() {
 object.css( "display", "none");
 object.closest("dl").find('label').css( "display", "none");
  var ul_object = jQuery('.messages');
   if(ul_object.length) {
      ul_object.css( "display", "none"); 
}
    });

jQuery('a[name=ral-v-rv]').click(function() {
 object.css( "display", "block");
 object.closest("dl").find('label').css( "display", "block");
 var ul_object = jQuery('.messages');
 // there's at least one matching element
 if(!ul_object.length) {
      object.closest("dl").prepend( '<ul class="messages"><li class="note-msg"><ul><li><span><?php echo __("There is a longer waiting period for RAL. It can take 4-6 weeks")?></span></li></ul></li></ul>' );
}
else {
    ul_object.css( "display", "block"); 
}

});
})