Mensagem: Imagem de produtos com seletor de cores

Imagem de produtos com seletor de cores

  • 25 de Novembro de 2014

    Marcos

    Estou precisando fazer um seletor de produtos que tenha ao clicar na cor do produto, troque também a foto do produto.
    Nas categorias:
    Faça login para comentar
    • 25 de Novembro de 2014

      Eduardo Kraus

      Olá Marcos

      Isso é particularmente simples...

      Código HTML:

      <div>
       <ul class="cores">
       <li class="cor1" data-imagem="http://www.chevrolet.com.br/content/dam/Chevrolet/lat-am/Brazil/nscwebsite/pt/Home/Cars/Camaro%202014/Model%20Overview/Colorizer/Vermelho%20Pull%20me%20Over/01_perspective_img_1.jpg"></li>
       <li class="cor2" data-imagem="http://www.chevrolet.com.br/content/dam/Chevrolet/lat-am/Brazil/nscwebsite/pt/Home/Cars/Camaro%202014/Model%20Overview/Colorizer/Preto%20Global/01_perspective_img_1.jpg"></li>
       <li class="cor3" data-imagem="http://www.chevrolet.com.br/content/dam/Chevrolet/lat-am/Brazil/nscwebsite/pt/Home/Cars/Camaro%202014/Model%20Overview/Colorizer/Amarelo%20Lemon%20Peel/01_perspective_img_1.jpg"></li>
       </ul>
      </div>
      <br/><br/>
      <img id="produto-foto" src="http://www.chevrolet.com.br/content/dam/Chevrolet/lat-am/Brazil/nscwebsite/pt/Home/Cars/Camaro%202014/Model%20Overview/Colorizer/Vermelho%20Pull%20me%20Over/01_perspective_img_1.jpg" alt="">

      Código jQuery:

      jQuery('.cores li').click(function(){
       jQuery('#produto-foto').attr('src', jQuery(this).attr('data-imagem'))
      })

      Código CSS:

      .cores{
       list-style-type: none;
      }
      .cores li{
       float: left;
       width: 30px;
       height: 30px;
       margin-left: 5px;
       cursor: pointer;
      }
      .cores li.cor1{
       background: #860001;
      }
      .cores li.cor2{
       background: #151515; 
      }
      .cores li.cor3{
       background: #ffd202;
      }
      #produto-foto{
       width: 100%;
      }
      Teste aqui: http://fiddle.jshell.net/eduardokraus/cam9qr4c/
      Faça login para comentar
      • 26 de Novembro de 2014

        Marcos

        Funcionou. Obrigado e parabéns pelo site
        Faça login para comentar
        • 19 de Maio de 2015

          Ricardo Leandro

          Boa tarde, Marcos

          Gostei muito do seu exemplo acima, gostaria de saber se pode me ajudar.

          Estou precisando de um script muito parecido com este, mas no meu caso, preciso de selecionar duas ou tres cores para exibir uma imagem final, de acordo com a combinação.
          Tem alguma dica para isso?
          Faça login para comentar

Logo Eduardo Kraus

Nossa missão é trazer educação de qualidade, para todas as pessoas, aonde quer que elas estejam para que elas possam alcançar seus sonhos profissionais.