Using a popup modal with a while loop

[Mekaboo]

Hey 😊

How do I get the modal to work with all the images within the loop? So far it only works with the most recent uploaded image with the older images dont move. Here is code:

 <?php
 require_once "db.php";
   $sql = "SELECT imageId,comment FROM output_images ORDER BY imageId DESC;";
   $result = mysqli_query($conn, $sql);
 
//  Loop thru comments and display all of them
while($row = mysqli_fetch_array($result)) {
    printf("%s (%s)\n", $row["imageId"]);
 ?>      

 

<img id="myImg" src="imageView.php?image_id=<?php echo $row["imageId"]; ?>" /><br/>
      <div id="myModal" class="modal">
  <span class="close">&times;</span>
    <img class="modal-content" id="img01">    
      </div>
</div>
        
    
<?php        
}    
?>
    

 
 </BODY>
  <script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>

Thank ya💙

[Ingolme]

There are two things you need to take into account:

1. id attributes must be unique, so they can never go inside a loop since that would create multiple elements with the same id.
2. Only things that need repeating should go in the loop. The modal box does not need to be repeated, so it must be outside of the loop.

This code will solve the problem:

<?php
require_once "db.php";
$sql = "SELECT imageId,comment FROM output_images ORDER BY imageId DESC;";
$result = mysqli_query($conn, $sql);
?>

<!-- Make one single modal window by keeping it outside of the PHP loop -->
<div id="myModal" class="modal">
  <span id="close-modal" class="close">&times;</span>
  <img class="modal-content" id="img01">    
</div>

<!-- Each image in the loop uses a class instead of an id, because ids must be unique -->
<?php while($row = mysqli_fetch_array($result)) { ?>
  <img class="preview" src="imageView.php?image_id=<?php echo $row["imageId"]; ?>" /><br/>
<?php } ?>

<script>
// Add event listener to the close button
document.getElementById("close-modal").addEventListener("click", closeModal);

// Add event listeners to all the images
var images = document.getElementsByClassName("preview");
for(let i = 0; i < images.length; i++) {
  let img = images[i];
  img.addEventListener("click", showImage);
}

/** Declare event handlers **/
// Close the modal
function closeModal(e) {
  var modal = document.getElementById("myModal");
  modal.style.display = "none";
}

// Open the modal and show an image
function showImage(e) {
  var img = e.currentTarget;
  var modal = document.getElementById("myModal");
  var modalImg = document.getElementById("img01");
  var captionText = document.getElementById("caption");
  modalImg.src = img.src;
  captionText.innerHTML = img.alt;
  modal.style.display = "block";
}
</script>

 

[Mekaboo]

Thank ya so very much❤️ @Ingolme