I made a thumbnail gallery with JS, and I am trying to show the current image's figcaption when a thumbnail is clicked. JS is working fine for retrieving and showing the thumbnails themselves, but I'm stumped on how to display their figcaptions along with it. (Thumbnail figcaptions are currently set to 'display: none').
Is a way to do this with CSS alone, or is a job for JS? Thanks in advance!
https://codepen.io/colinjalbert/pen/OJMBOMg
let current = document.querySelector("#current");
let photos = document.getElementsByClassName("thumb");
for (let i = 0; i < photos.length; i++) {
photos[i].addEventListener("click", display);
}
function display() {
let prev = this.getAttribute("src");
current.setAttribute("src", prev);
}* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin-bottom: 4em;
background-color: #1c1c1c;
}
figure {
margin: 0px;
text-align: center;
float: right;
}
figcaption {
position: relative;
float: center;
font-family: "Raleway";
font-size: 1em;
font-weight: 400;
text-align: left;
top: -35px;
padding: 0.5em;
color: #f9f9f9;
background-color: black;
opacity: 0.8;
}
.gallery-container {
display: flex;
margin: 2em 2em;
background-color: transparent;
}
.gallery {
display: flex;
margin-top: -5px;
width: 50%;
height: auto;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.gallery-item {
display: flex;
width: 10em;
height: 10em;
margin: 8px;
overflow: hidden;
border-radius: 5px;
}
.gallery-item img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transform: scale(1.2);
transition: transform 400ms ease-out;
-webkit-transition: transform 400ms ease-out;
-moz-transition: transform 400ms ease-out;
}
.gallery-item img:hover {
transform: scale(1.18);
-webkit-transform: scale(1.18);
cursor: pointer;
}
.preview-container {
display: block;
width: 50%;
height: auto;
margin-left: 1em;
}
.preview {
display: block;
width: 100%;
height: auto;
}
.thumbcaption {
display: none;
}
#current {
display: block;
width: 100%;
height: auto;
border-radius: 5px;
}
#caption {
display: block;
}<body>
<div class="gallery-container">
<div class="gallery">
<div class="gallery-item">
<img src="http://seymourchwastarchive.com/wp-content/uploads/2015/03/Chwast_PPG81_001d-1600x1073.jpg" alt="" class="thumb">
<figcaption class="thumbcaption">Blue (1979)</figcaption>
</div>
<div class="gallery-item">
<img src="http://seymourchwastarchive.com/wp-content/uploads/2015/03/Chwast_Monkey_001_SOI85-1230x1600.jpg" alt="" class="thumb">
<figcaption class="thumbcaption">No Evil (2003)</figcaption>
</div>
<div class="gallery-item">
<img src="http://seymourchwastarchive.com/wp-content/uploads/2014/12/Chwast_FAG_008-1287x1600.jpg" alt="" class="thumb">
<figcaption class="thumbcaption">Self Portrait (1980s)</figcaption>
</div>
<div class="gallery-item">
<img src="http://seymourchwastarchive.com/wp-content/uploads/2014/12/Chwast_Fader_001.jpg" alt="" class="thumb">
<figcaption class="thumbcaption">The Notorious B.I.G. (2011)</figcaption>
</div>
</div>
<div class="preview-container">
<figure class="preview">
<img src="http://seymourchwastarchive.com/wp-content/uploads/2015/03/Chwast_Monkey_001_SOI85-1230x1600.jpg" alt="" id="current">
<figcaption id="previewcaption">No Evil (2003)</figcaption>
</figure>
</div>
</div>
</body>