html - Fig caption doesn't change when i click on other images

Question

When i click on different images the fig caption says the same thing, i am trying to change it so when i click on different images, the fig caption changes.

I have attempted to change it and have only been able to put separate fig captions under each image. Not make the fig caption change depending on what image has been clicked.

<main id="gallery">

<h1> Get fit and stay fit with Betty Swannocks Fitness Center </h1>     
<figure> 
   <img src="images/gym4.jpg" alt="gym photos">
   <figcaption> Gym4 </figcaption>
   </figure>   

<ul>
<li><a href="images/gym1.jpg" title="gym1"><img src="images/gym1-150.jpg" width="150" height="100" alt="Fitness1"> </a> </li>  
<li><a href="images/gym2.jpg" title="gym2"><img src="images/gym2-150.jpg" width="150" height="100" alt="Fitness2"> </a></li>
<li><a href="images/gym3.jpg" title="gym3"><img src="images/gym3-150.jpg" width="150" height="100" alt="Fitness3"> </a></li>
<li><a href="images/gym4.jpg" title="gym4"><img src="images/gym4-150.jpg" width="150" height="100" alt="Fitness4"> </a> </li>
<li><a href="images/gym5.jpg" title="gym5"><img src="images/gym5-150.jpg" width="150" height="100" alt="Fitness5"> </a> </li>   
<li><a href="images/gym6.jpg" title="gym6"><img src="images/gym6-150.jpg" width="150" height="100" alt="Fitness6"> </a> </li>
</ul>   
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#gallery a').click(function(){
var galleryHref = $(this).attr('href');
var galleryAlt = $(this).attr('title');
$('figure img').attr({src:galleryHref, alt:galleryAlt});    
return false; 
});
})      
   </script>
</body>
</html>

I expected the fig caption to change based on the image that was clicked, it stays the same fig caption despite other images being clicked.

标签： htmlphoto-gallerycaptionfig