Javascript/CSS Lightbox仅首个元素生效问题排查与解决

Hey Mike, let's sort out why only your first gallery image opens the lightbox—this is a super common gotcha with HTML IDs!

What's Causing the Issue? #

The core problem is that you're using the same id="myImg" for every image in your gallery. In HTML, IDs must be unique per page—when you use document.getElementById('myImg'), it only grabs the first element with that ID, so only your first image gets the click event attached.

Fixed Implementation #

Here's how to adjust your code to make all images trigger the lightbox:

1. Update HTML/PHP (Replace IDs with Classes) #

We'll swap the duplicate id="myImg" with a reusable class="myImg" instead, and fix the database loop to properly iterate through your results:

<?php 
$result4 = $mysqli->query("SELECT * FROM user_data WHERE user_id = $p_id");
if($result4->num_rows > 0) {
    // Loop through each database row to load unique images
    while($row = $result4->fetch_assoc()) {
        $image = $row['your_image_column_name']; // Replace with your actual image column name
        echo '<div class="profile_gallery_image"><img class="myImg" src='.$image.' height="100%" width="100%" /></div>';
    }
} 
?>
<!-- The Modal stays unchanged -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
</div>

2. Update CSS (Target the Class Instead of ID) #

Change all instances of #myImg to .myImg in your CSS to match the new class selector:

<style>
.myImg {
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {
transform: scale(1.09);
border: 1px solid #a5a5a5;
}
/* Rest of your CSS remains exactly the same */
.modal {
display: none; 
position: fixed; 
z-index: 10; 
padding-top: 100px; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.9); 
}
.modal-content {
margin: auto;
display: block;
width: 100%;
max-width: 500px;
border: 1px solid #f1f1f1;
border-radius: 0px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover, .close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>

3. Update JavaScript (Bind Click Events to All Images) #

Instead of grabbing a single element by ID, we'll get all images with the myImg class and loop through them to attach the click event:

<script>
// Get the modal and modal image element
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");

// Get ALL gallery images and bind click events to each
var imgs = document.querySelectorAll('.myImg');
imgs.forEach(function(img) {
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
    }
});

// Close modal when clicking the "X" button
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}

// Close modal when clicking outside the image
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

I cleaned up the outside-click close logic to be more straightforward than your original approach.

That's it! Now every image in your gallery will open the lightbox with its own source when clicked.

内容的提问来源于stack exchange，提问作者Mike Dawson