gallery with modal window-CodePudding

I am creating a gallery in PHP. Clicking on each thumbnail should open a modal window with the image and other information. The problem is that it only works with the first thumbnail and not with the others. this is part of the php code:

        while($i !== $nIMG){
        $recordIMG = $q->fetch(PDO::FETCH_ASSOC);
        echo "<div class='content-img'><img src='". $recordIMG['urljpg'] ."' id='infoIMG'></div>";

        $i  ;
    }

this is the modal window

        <div  id="myModal">
        <img  id="img01">
        </div>

this is the javascript code

        var modal = document.getElementById("myModal");
        var img = document.getElementById("infoIMG");
        var modalImg = document.getElementById("img01");
        img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
     }

I am thinking it is an ID issue which must be unique. But I don't know how to solve, could someone more experienced help me?

CodePudding user response：

In that case, the php part was okay. Add onclick="openImage(this)" to it, and than move to the javascript part.

There, you would need a new function to pass the image src. I also re-named the modal image class to a more general one: image-content

// Get the modal
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("image-content");

// 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";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


// Look at this code: element is passed to the function
function openImage(element) {
  modal.style.display = "block";
  // This is where the magic happens :)
  modalImg.src = element.src;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <h2>Modal Example</h2>

  <!-- Trigger/Open The Modal -->
  <div class='content-img'><img src="https://picsum.photos/100/100?random=1" onclick="openImage(this)"></div>
  <div class='content-img'><img src="https://picsum.photos/100/100?random=2" onclick="openImage(this)"></div>
  <div class='content-img'><img src="https://picsum.photos/100/100?random=3" onclick="openImage(this)"></div>
  <!-- The Modal -->
  <div id="myModal" >
    <!-- Modal content -->
    <div  id="myModal">
      <span >&times;</span>
      <img  id="image-content">
    </div>
  </div>
</body>

</html>

CodePudding user response：

before getting your answer i tried to create two for loops in php and javascript and it works. These are the codes:

PHP:

        $n = 0;
        for($i = 0; $i !== $nIMG; $i  ){
        $n  ;
        $recordIMG = $q->fetch(PDO::FETCH_ASSOC);
        echo "<div class='content-img'><img src='". $recordIMG['urljpg'] ."' id='infoIMG".$n."'></div>";
    }

Javascript:

    var nr = 0;
    for(i = 0; i < 100; i  ){

    nr  ;

    var y = "infoIMG"   nr;

    var img = document.getElementById(y);
    var modal = document.getElementById("myModal");
    var modalImg = document.getElementById("img01");
    img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    }
    
    }

Everything seems to work fine. Do you think it might be okay or is it better to use the code reported by you? If I use this code, the only doubt is to understand how to pass the number of rows of the mysql database as the second parameter of the JS for loop.