In my project, I have a row of 6 different images that are randomly selected from an array of objects. Each object in the array contains both a thumbnail and a high-resolution image (which is the same as the thumbnail). The goal is to allow users to click on any of the thumbnails and view the full-screen high-res image in a modal. Currently, this functionality only works with the first image due to using the ID attribute. To make it work for all six images, I attempted to switch to using the class attribute but encountered issues. There are a total of 96 images in the array, with 48 thumbnails and 48 high-res images. Below is a snippet of the array, as well as abridged versions of the HTML, JavaScript, and CSS.
I've experimented with using both .avengerpic and avengerpic (the class name) but neither has provided the desired outcome. The objective remains to display 6 thumbnails in a row and enable users to open a modal displaying the larger high-res version of the chosen image upon clicking.
let picArray = [
{thumbnail: "https://rcabrerapics.s3.us-east-
2.amazonaws.com/assets/avengers_1.jpg", image:
"https://rcabrerapics.s3.us-east-
2.amazonaws.com/assets/avengers_large_1.jpg"},
...
{thumbnail: "https://rcabrerapics.s3.us-east-
2.amazonaws.com/assets/avengers_7.jpg", image:
"https://rcabrerapics.s3.us-east-
2.amazonaws.com/assets/avengers_large_7.jpg"}]
let moviePics = function() {
document.querySelectorAll('.avengerPic').forEach(function(e) {
const randomPic = Math.floor((Math.random() * picArray.length));
e.src = picArray[randomPic].thumbnail;
});
}
moviePics();
...
<div class="container">
<div class="pics">
<table>
<tr>
... // Other HTML elements
<img class="avengerPic" id="myImg" src=...>
... // Modal content
... // Repeat for other images
</tr>
</table>
</div>
</div>
.container {
display: flex;
align-items: baseline;
flex-direction: row;
flex-wrap: nowrap;
vertical-align: middle;
margin: 5px 15px;
}
.pics img {...}
.modal {...}
.modal-content {...}
.caption {...}
.close {...}