0

When the user clicks a "Vacation" image on the left, a larger copy of it will appear to the right of the images in the image with an id of "currentimage" inside the "bigimage" div. (See the HTML file)

At the same time one of the following should appear below the "currentimage": "Mountain Vacation", "Ocean Vacation", or "Desert Vacation" depending on which image was selected.

this is part of the HTML code

<div id="bigimage">
<img id="currentimage" src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
<p id="imagedesc"></p>
</div>

This is part of the JS code

$("img").click(function () 
{
var mySrc = $(this).attr("src");

$("#currentimage").attr("src", mySrc);

$("#imagedesc").html(this.alt); 
});

I also tried

$("img").click(function () 
{
$("#currentimage").attr("src", this.src);

$("#imagedesc").html(this.alt); 
});

but when i click the image a larger copy of it is not appearing on the right

S J
  • 27
  • 2
  • I don't understand what you're trying to do. The code currently adds a click handler to the image and when clicked, changes the src to the same src that it already is. – Namaskar Oct 24 '19 at 20:25

2 Answers2

0

Browsers not reload image after change src. Try remove old element with old image and paste new element with new image src.

Or: How to reload/refresh an element(image) in jQuery

Alexander V. Ulyanov
  • 346
  • 2
  • 15
0

Your click handler is on any img this means that the #currentimage element is the only element which this handler is added. You are then setting the src to the src that it already is.

you instead want to change the src to something else. Here I set an initial smaller placeholder which is replaced with a larger one on click.

$("img").click(function() {
  this.src = 'https://placeimg.com/500/500';
  $("#imagedesc").html(this.alt);
});
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<img id="currentimage" src="https://placeimg.com/200/200" alt="ocean vacation" />
<p id="imagedesc"></p>
Namaskar
  • 2,114
  • 1
  • 15
  • 29