Change img src when clicked jquery

Question

I have some HTML code:

<div class="text-center img-big">
  <!-- IMAGE BIG  -->
  <img class="img-fluid img-big" src="" alt="">
</div>

<!-- IMAGE SMALL  -->
<a id="getImg" href="" ><img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>

<a id="getImg" href="" ><img src="img/asus-thumb.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>

<img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100">

and this is my some jquery code :

<script type="text/javascript">
  var imgSrc = $(".thumb-first").attr("src");
  $(".img-big").attr("src",imgSrc);

  $("#getImg img").on("click",function(){
    tes = $(this).attr("src");
    $(".img-big").attr("src",imgSrc);
  });
</script>

I want to change src image big when image small clicked, but my code doesn't work properly.

do you see any errors in console..? Btw, there are 2 elements with class `img-big`, so `$(".img-big")` might not return the one you want. Try being explicit like `$("img.img-big")` to get `img` element with class `img-big` — Sudhir Bastakoti, Feb 26 '18 at 05:24
you have used `getImg` id twice...which is not valid...Also its not clear what you are doing...you have used three small images for `asus`...why???...better to edit your question — Bhuwan, Feb 26 '18 at 05:26
Do you want the source of the small image to be "transferred" to the big image after clicking? — Carl Binalla, Feb 26 '18 at 05:26
no error in console, when i clicked small img, src of image big has changed, but back again as before — Shidqi, Feb 26 '18 at 05:29
You should preventDefault action in A tag. Or remove A tags. — seokgyu, Feb 26 '18 at 05:30

score 2 · Answer 1 · answered Feb 26 '18 at 05:35

First, you have multiple elements with the same id attribute.

Second, tes variable here is not defined.

tes = $(this).attr("src");

Third, try placing your javascript at the bottom of the html page or place your javascript code inside the ready function:

$(document).ready(function(){

});

score 2 · Accepted Answer · answered Feb 26 '18 at 05:43

What I did is to change id="getImg" to class="getImg" because id attribute should always be unique.

Instead of getting the click event of the image, I used the click event of <a>, then located the <img> using find().

I also added an id to the big image, because there are two instance of .img-big, which is an <img> and <div>, and <div> does not have a src attribute.

Lastly, I used e.preventDefault() to prevent the redirection when clicking a <a> tag

$(".getImg").click(function(e) {
  var imgSrc = $(this).find("img").attr("src");
  $("#bigImage").attr("src", imgSrc);
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
  <!-- IMAGE BIG  -->
  <img id="bigImage" class="img-fluid img-big" src="" alt="">
</div>

<!-- IMAGE SMALL  -->
<a class="getImg" href=""><img src="http://via.placeholder.com/100x100" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>

<a class="getImg" href=""><img src="http://via.placeholder.com/200x200" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>

score 0 · Answer 3 · answered Feb 26 '18 at 05:52

You don't need to give getImg, it can be done through onclick function. Try my code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
  <!-- IMAGE BIG  -->
  <img class="img-fluid img-big" src="" alt="">
</div>

<!-- IMAGE SMALL  -->
<a href="javascript:;" ><img onclick="change_img(this)" src="Egg.png" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>

<a href="javascript:;" ><img onclick="change_img(this)" src="Fish.png" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>
 


<script>
    function change_img(param){
        var src = $(param).prop('src');
        $('.img-big').prop('src',src);
    }
</script>

Change img src when clicked jquery

3 Answers3