How to make the swatch images change on above option select?

Question

Using the default configurable swatches in a Rwd based theme, and I would Like below option swatches to change depending on the above options selected.

For example, if I select Design 1 for the attribute/option design and then blue for attribute/option colour, the size should change to another image.

Would anyone know how to achieve this ?

Answer 1

$j(".swatch-link").click(function(){ 
var id = this.id;

if($j('#attribute134').val() ){
    var sizechoice = $j('#attribute134').val();

    if(id == "swatch13"){
        $j( "#configurable_swatch_design img" ).each(function( index ) {
            index++;
            jQuery(this).attr('src',index+".jpg");
        });

    } else if(id == "swatch12"){
            $j( "#configurable_swatch_design img" ).each(function( index ) {
                index++;
                jQuery(this).attr('src',index+"/_"+"/"+index+".jpg");
            });
    }
}

});

This code iv'e written will on swatch click, store the clicked swatches Id. Then making sure the hidden select magento uses has a value. If so: check which Size chosen and accordingly loop through all of the Design option swatches and change Image.