Colegas.
Tenho visto em algumas lojas virtuais que existe o recurso de mudar as cores do produto. Como eu faria para que ao clicar em uma determinada cor, o produto fosse alterado sem refresh? veja um modelo: lapupa.com.br/539sl
Podes fazer assim, tendo em conta que isto obviamente não é o mesmo produto nem cores, mas a lógica será esta:
const prod_colors = {blue: 'https://cdn.mensagenscomamor.com/resize/400x225/content/images/int/imagens_de_deus.jpg', green: 'http://cdn.mixme.com.br/wp-content/uploads/2016/01/disney5.jpg', red: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTQJ8oMypN2S5RyM1S9zKxO3AOBc1UNT_EanYOIRYWK1evZVaj5'}
for(var color in prod_colors) { // adicionar dinamicamente as cores que temos à disposição ao nosso select
$('.colors').append('<div style="background-color: ' +color+ '" data-image="' +prod_colors[color]+ '"></div>');
}
$('.colors div').on('click', function() {
var img_cor = $(this).data('image');
$('.img_dinamic').prop('src', img_cor);
});
.colors div {
width: 20px;
height: 20px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img_dinamic" src="https://cdn.mensagenscomamor.com/resize/400x225/content/images/int/imagens_de_deus.jpg">
<div class="colors">
</div>
<br>