How to set the src property to change an image when using .click in jQuery

Question

I am trying to change an image using jquery upon clicking. So when I click on an image it appears on the viewport then I click on another image above it and it changes to that image and then a third. When I try it only clicks on one image.

HTML CODE:

<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<p><img src="mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
<p><img src="desert.jpg" alt="Desert Vacation"><br /><br /></p>
<p><img src="ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>

<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>

jQuery Code:

  $("#vacationimages", "src").click(function(){

 $("#firstname").text("");

 $("#bigimage").show("slow");

   var myfirst = $("#firstname").val();

  $("#currentimage").attr("src", "ocean.jpg");

   $("#currentimage").attr("src", "desert.jpg");

Only the 2nd image displays despite me having different images on the same page.

add a timer $("#currentimage").attr("src", "ocean.jpg").fadein(1000).fadeout(5000); $("#currentimage").attr("src", "desert.jpg").fadein(6000).fadeout(10000); — user8556290
– user8556290, Commented Oct 15, 2017 at 18:28

Robert Wade · Accepted Answer · 2017-10-15 18:45:57Z

Use "on" vs. "click" because it will then work for dynamically added elements, and save you headaches later. After that it's simply populating the image properties with those you gathered from the clicked image or $(this) in the scope of your function.

$(function() {
  $("#vacationimages img").on("click", function() {
    $("#currentimage").attr("src", $(this).attr("src"));
    $("#imagedesc").html($(this).attr("alt"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<img src="http://fillmurray.com/30/30.jpg" alt="Mountain Vacation">
<img src="http://fillmurray.com/32/32.jpg" alt="Desert Vacation">
<img src="http://fillmurray.com/34/34.jpg" alt="Ocean Vacation">
</div>

<div id="bigimage">
<img id="currentimage" src="" alt="">
<p id="imagedesc"></p>
</div>

Another common approach in a scenario like this is to use an anchor tag around the img (<a>) and populate it's rel attribute with a larger source image, if what you're going for is click a thumbnail to view a larger image. In that case you bind the event listener to the anchor (not the image) and change the src to the anchor's rel (as opposed to the src of the img inside the anchor).

Mehdi Bouzidi · Accepted Answer · 2017-10-15 20:08:03Z

0

$("#vacationimages img").on("click",function(){
  $("#bigimage img").attr("src",$(this).attr("src"));
   $("#bigimage p").text($(this).attr("alt"));
    
});

$("#submitme").on("click",function(){
 $("#mymessage").text($("#name").val()+" You want a "+$("#imagedesc").text());
});

img
{
height:32px;
width:32px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<label>Name:<input type="text" id="name"></label><br><br>
<img src="https://image.flaticon.com/icons/png/128/181/181549.png" alt="Mountain Vacation"><img src="https://image.flaticon.com/icons/png/128/148/148766.png" alt="Desert Vacation">
<img src="https://image.flaticon.com/icons/png/128/138/138662.png" alt="Ocean Vacation">
</div>

<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>
<br><br>
<div id="submitdiv"> <input id="submitme" type="button" value="Submit ME"> <p id="mymessage"></p> </div>

edited Oct 15, 2017 at 20:08

answered Oct 15, 2017 at 18:30

Mehdi Bouzidi

2,0153 gold badges17 silver badges32 bronze badges

11 Comments

TRS7 Over a year ago

The images should appear to the right hand side of the left side image. I tried this code but they all still display the same image. How do I make each image individually appear by clicking each image? So if I click image 1 then image 1 appears, if I click image 2 then Image 2 appears and so on? Right now I click on image 2 and image 1 still shows up.

TRS7 Over a year ago

I used your code and it worked well, the only thing is, when I click on each image on the view port, it still only displays one image regardless of which image I click. I have all three images included with the ("src").and all of the code is within the .on("click") Code is below: $("#currentimage").attr("src", "mountain.jpg"); $("#currentimage").attr("src", desert.jpg"); $("#currentimage").attr("src", "ocean.jpg");

Mehdi Bouzidi Over a year ago

@ST3 you want to display the list of clicked images ?

TRS7 Over a year ago

Sorry, When I click an image I want it to state (myfirstname + You have selected a Desert Vacation || Mountain Vacation || Ocean Vacation, depending on which image is clicked. How do I store the alt of each image in a click so that the correct vacation is displayed in between the <p id="imagedesc"></p> tags?

TRS7 Over a year ago

I upvoted but it says "thanks for feedback but votes cast by those with less than 15 reputation are recorded but do not change the publicly displayed post score" Anyway to bypass this? I want to give you the credit due!

|

Collectives™ on Stack Overflow

How to set the src property to change an image when using .click in jQuery

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related