0

Galera, eu desenvolvi esse layout, segue o código e uma imagem de exemplo:

   <div class="col-xl-6 pr-0 d-flex align-items-center">
            <div class="col-xl-3" style="float:left;">
                <div class="col-xl-12 p-0">
                    <img src="<?= $endereco ?>/img/ID5_A0_Rectangle_46_pattern.png" class="w-100">
                </div>
                <div class="col-xl-12 p-0">
                    <img src="<?= $endereco ?>/img/ID5_A0_Rectangle_46_pattern.png" class="w-100">
                </div>
                <div class="col-xl-12 p-0">
                    <img src="<?= $endereco ?>/img/ID5_A0_Rectangle_46_pattern.png" class="w-100">
                </div>
                <div class="col-xl-12 p-0">
                    <img src="<?= $endereco ?>/img/ID5_A0_Rectangle_46_pattern.png" class="w-100">
                </div>
            </div>
            <div class="col-xl-9 p-0" style="float:right">
            <img src="<?= $endereco ?>/img/ID13_A0_Rectangle_38_pattern.png" class="w-100" style="height:36vh">

            </div>
     </div>

Exemplo imagem

O que eu preciso fazer é que quando houver click na thumb, a thumb vai para o lugar da imagem aberta e a imagem aberta vai para o lugar da thumb. Apenas encontrei exemplos na internet onde a imagem aberta já vem disposta como thumb.

1 Resposta 1

3

Coloque uma class específica na div principal onde estão as imagens thumbs (coloquei a classe .thumbs: <div class="col-xl-3 thumbs" style="float:left;">) e outra class na imagem principal (coloquei a classe .aberta). Crie um event handler de click na classe das thumbs que ao ser clicada irá alterar o atributo src de ambas imagens, fazendo a troca de uma pela outra.

Exemplo:

// seleciona todas as imagens dentro da div.thumbs
$("div.thumbs img").on("click", function(){
   
   var thumb_img = $(this).attr("src"); // src da thumb clicada
   var abert_img = $(".aberta").attr("src"); // src da imagem principal
   // troca o src da imagem principal pela da thumb clicada
   $(".aberta").attr("src", thumb_img);
   // troca o src da thumb clicada pelo src da imagem principal
   $(this).attr("src", abert_img); // troca
   
});
.thumbs img{
   cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="col-xl-6 pr-0 d-flex align-items-center">
      <div class="col-xl-3 thumbs" style="float:left;">
          <div class="col-xl-12 p-0">
              <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" class="w-100">
          </div>
          <div class="col-xl-12 p-0">
              <img src="https://tinyjpg.com/images/social/website.jpg" class="w-100">
          </div>
          <div class="col-xl-12 p-0">
              <img src="https://onlinejpgtools.com/images/examples-onlinejpgtools/sunflower.jpg" class="w-100">
          </div>
          <div class="col-xl-12 p-0">
              <img src="https://static1.squarespace.com/static/5957431d099c01c37e62b160/t/5aa007ca71c10bf6d38eb2c4/1533211386150/react_76_v02_santi0095.jpg" class="w-100">
          </div>
      </div>
      <div class="col-xl-9 p-0" style="float:right">
         <img src="https://imagens.canaltech.com.br/123987.210185-JPG.jpg" class="w-100 aberta" style="height:36vh">
      </div>
</div>

1
  • Muito obrigado, deu certinho 9/04/2019 às 16:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .