Change picture or image color in virtual store

Question

Change picture or image color in virtual store

Navigation

#1 by (2 votes)

3

Colleagues.

I have seen in some virtual stores that there is the ability to change the colors of the product. How would I do that by clicking on a particular color, the product would be changed without refresh? see a template: lapupa.com.br/539sl

jquery

asked by anonymous 10.01.2017 / 10:34

1 answer

How to implement voice and video calls in my apps [closed] Sort the keys of an object simulating ORDER BY ASC NAME

score 2 · Accepted Answer

You can do this, considering that this obviously is not the same product nor colors, but the logic will be this:

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><imgclass="img_dinamic" src="https://cdn.mensagenscomamor.com/resize/400x225/content/images/int/imagens_de_deus.jpg"><divclass="colors">
      
    </div>
    <br>