Image gallery with wide open image and side thumbnails

Asked

Viewed 151 times

0

Guys, I developed this layout, follow the code and an example image:

   <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

What I need to do is that when there is a click on Thumb, Thumb goes to the open image place and the open image goes to the Thumb place. I just found examples on the internet where the open image is already available as Thumb.

javascript html jquery css

1 answer

3


Place a specific class in the main div where the Thumbs images are (I put the class .thumbs: <div class="col-xl-3 thumbs" style="float:left;">) and another class in the main image (I put the class .aberta). Create a Event Handler click on the Thumbs class that when clicked will change the attribute src of both images, exchanging one for the other.

Example:

// 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>

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.