'How can I add a description to show when clicked on an image?

When I click on an image it opens up in a bigger image box. I want to add a description to each image that opens up under the image box when I open that particular image. As shown in the picture I want to display the description to that particular image under the larger image box when the image is clicked. 

$(document).ready(function() {
  $(".Thumbnail a").click(function(e) {
    e.preventDefault();
    $(".imgBox img ").attr("src", $(this).attr("href"));
  });
});

document.addEventListener("mousemove", showImage);
document.addEventListener("mouseleave", showImage);
document.addEventListener("scroll", showImage);

function showImage() {
  var items = document.getElementById("thumbnail").getElementsByTagName("li");
  Array.from(items).forEach(function(e) {
    if (e.getElementsByTagName("img")[0].matches(":hover")) {
      //put whatever you want in here
      e.style.backgroundColor = "blue";
    } else {
      //likewise put whatever you want in here
      e.style.backgroundColor = "red";
    }
  });
}
<body>
  <div class="imgBox"><img src="" alt="" /></div>
  <ul class="Thumbnail" id="thumbnail">
    <li>
      <a href="img1.jpg" target="imgBox"><img src="img1.jpg" width="120px" /></a>
    </li>
    <li>
      <a href="img2.jpg" target="imgBox"><img src="img2.jpg" width="120px" /></a>
    </li>
    <li>
      <a href="img3.jpg" target="imgBox"><img src="img3.jpg" width="120px" /></a>
    </li>
    <li>
      <a href="img4.jpg" target="imgBox"><img src="img4.jpg" width="120px" /></a>
    </li>
    <li>
      <a href="img5.jpg" target="imgBox"><img src="img5.jpg" width="120px" /></a>
    </li>
  </ul>
</body>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

enter image description here

javascripthtml


Solution 1:[1]

I would be inclined to use figure for this as it makes a neat wrapper for both an image and a caption.

// Cache a container, and add a listener to it
const container = document.querySelector('div');
container.addEventListener('click', handleClick, false);

function handleClick(e) {

  // If the clicked element is an image
  if (e.target.matches('img')) {
  
    // Get its parentNode (figure)
    const parent = e.target.parentNode;
    
    // Get the `figcaption`
    const caption = parent.querySelector('figcaption');
    
    // Toggle its `showcaption` class
    caption.classList.toggle('showcaption');
  }
}
figure { display: inline-block; }
figure img:hover { cursor: pointer; }
figcaption { visibility: hidden; }
.showcaption { visibility: visible; }
<div>
  <figure>
    <img src="https://dummyimage.com/100x100/000/fff" alt="Dummy image">
    <figcaption>Dummy image</figcaption>
  </figure>
  <figure>
    <img src="https://dummyimage.com/100x100/f44/000" alt="Dummy image 2">
    <figcaption>Dummy image 2</figcaption>
  </figure>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andy

Related Questions