CODEWITHSUNDEEP
javascriptjqueryfunction
DinhCode
DinhCode

Reputation: 120

JS multiple class same function

I use js to load big image whent hover to list thumbnail ok. but don't work to multiple.

How to: hover .thumbs .item of boximg_01 or boximg_02 .... loading only image in boximg_1 or boximg_02 width one js function. multiple boximg_* loading img only of element.

Now when hover thumbs img of boximg_01 it run 2 big img on both boximg_01 & boximg_02

$(document).ready(function() {
  $(".box-image .thumbs img").hover(function() {
    var imgpath = $(this).attr("dir");
    $(".box-image .image").html("<img src=" + imgpath + ">");
  });
});
#image {
  max-width: 348px;
  margin: 0 auto;
  float: left;
  background: red;
}
#thumbs, .thumbs {
  width: 100%;
  margin: 0 auto;
  display: flex;
  float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
  <div id="image" class="image">
      <a data-fancybox="gallery" href="#">
        <img src="https://picsum.photos/id/1/400/400">
      </a>
    </div>
  <div class="thumbs">
      <div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
      <div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
  <div id="image" class="image">
      <a data-fancybox="gallery" href="#">
        <img src="https://picsum.photos/id/3/400/400">
      </a>
    </div>
  <div class="thumbs">
      <div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
      <div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
    </div>
</div>

Upvotes: 0

Views: 504

Answers (1)

Barmar
Barmar

Reputation: 782785

Use DOM navigation relative to this to find the related image.

$(document).ready(function() {
  $(".box-image .thumbs img").hover(function() {
    var imgpath = $(this).attr("dir");
    $(this).closest(".box-image").find(".image").html("<img src=" + imgpath + ">");
  });
});
#image {
  max-width: 348px;
  margin: 0 auto;
  float: left;
  background: red;
}
#thumbs, .thumbs {
  width: 100%;
  margin: 0 auto;
  display: flex;
  float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
  <div id="image" class="image">
      <a data-fancybox="gallery" href="#">
        <img src="https://picsum.photos/id/1/400/400">
      </a>
    </div>
  <div class="thumbs">
      <div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
      <div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
  <div id="image" class="image">
      <a data-fancybox="gallery" href="#">
        <img src="https://picsum.photos/id/3/400/400">
      </a>
    </div>
  <div class="thumbs">
      <div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
      <div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
    </div>
</div>

Upvotes: 1

Related Questions