I created a gallery of modal images that I want to open when clicked, but for some reason it's not working as expected. What I'm trying to achieve is passing the image ID of each image to JavaScript when they are clicked so that the script can then open the corresponding image in a popup or modal with a close button.
Here's the CSS code:
<style>
/* The grid: Four equal columns that float next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Styling for the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Container for the expanding image */
.imgcontainer {
position: relative;
display: none;
}
// Additional styles for the modal and close button
...
</style>
And here's the HTML code:
<div id="myModal" class="modal">
...
</div>
<div class="row">
...
</div>
</div>
</div>
Finally, the JavaScript code looks like this:
<script>
function myFunction(imgs) {
...
};
</script>