Nyusha Nyusha - 9 months ago 26
HTML Question

Select different pictures in jquery/js

I'm trying to make a simple photo viewer, and I want to know how to select the src of that image, in order to change the big image (.big-t)

This is the HTML+JS code part so far:



$("#ImageFound").click(function(e){
var bigthumb = $("#ImageFound").attr("src");
alert(bigthumb);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="diaporama-thumbs" id="wabi3-slider">
<div class="thumb-preview">
<img id="big-thumb" class="big-t" src="big-image1.png" />
</div>
<div class="small-thumbs">
<div class="thumbs-container">
<div class="small-pre">
<a id="FindImage" href="#"><img id="ImageFound" src="image1.png"/></a>
</div>
<div class="small-pre">
<a id="FindImage" href="#"><img id="ImageFound" src="image2.png"/></a>
</div>
</div>
</div>
</div>






The
alert(bigthumb)
only return "image1" even if I click on the second small image

Answer Source

$(".small-pre img").click(function(e){    
  var smallSrc = $(this).attr("src");
  var bigSrc = "big-"+ smallSrc;

  showPicture(bigSrc);
  
  //alert(bigSrc);
});


function showPicture(src){

  $(".thumb-preview img").attr("src", src)

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="diaporama-thumbs" id="wabi3-slider">
  <div class="thumb-preview">
    <img id="big-thumb" class="big-t" src="big-image1.png" />
  </div>
  <div class="small-thumbs">
    <div class="thumbs-container">
      <div class="small-pre">
        <a href="#"><img src="image1.png"/></a>
      </div>
      <div class="small-pre">
        <a  href="#"><img src="image2.png"/></a>
      </div>
    </div>
  </div>
</di>