PHP: How to create modal for every image

Question

I have a form that ables user to upload incident images to a specific patient and the path of the image will be stored to the database.

now my problem is that when im in the patient form that displays the patient's images i want to display a modal for every images the patient's have.

Here's my TABLE:

Here's my code:

<?php 

$con_mysql = mysql_connect('localhost','root','admin');
mysql_selectdb('dbphotos'); 

$sql = "SELECT * FROM  `tblphotos` WHERE `pnt` LIKE '1' ";
$result= mysql_query($sql);
while($data = mysql_fetch_assoc($result))
  {
      $id = $data['id'];
      $pnt = $data['pnt'];
      $path = $data['path'];

      ?>
      <div >
      <img id="myImg" src="uploads/<?php echo $path; ?>" title="<?php echo $path; ?>" alt="<?php echo $path; ?>" width="300" height="200">  
      </div>

      <div id="myModal" class="modal">
        <span class="close">X</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
      </div>

        <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;
          modalImg.alt = this.alt;
          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>

      <?php
  }
 ?>

only the 1st image has a modal the other images does'nt open a modal

now i know that the problem are at the ID's of the div and at the script cause it will only loop the same ID's.

so I Think the solution is using echo $id to the ID and Class :

      <div>
      <img id="<?php echo $id; ?>" src="<?php echo $path; ?>" title="<?php echo $path; ?>" alt="<?php echo $path; ?>" width="300" height="200">  
      </div>

      <div id="<?php echo $id; ?>" class="modal">
        <span class="<?php echo $id; ?>-close">X</span>
        <img class="<?php echo $id; ?>-content" id="<?php echo $id; ?>-img01">
        <div id="caption"></div>
      </div>

But i don't know how to display the looped ID of the PHP to the javascript.

Thank You in Advance....

Answer 1

The easiest way to do this is to use some lightbox plugin as this one

Downloads the files and call the script on your html page and then, use it like :

<a href="<?php echo $path ?>"><img src="<?php echo $path ?>"></a>

Answer 2

You are looping over too much. You do not need to create a new modal container for each image, or new <script> block.

You can use a single modal container and just set the image inside it to the src of the image clicked. And for the script you just need to set a click event handler for each image using the same function for the handler.

For the image generation just loop over the html that creates your images. Give them all the same class name that way you can use a single selector to get a reference to them.

while($data = mysql_fetch_assoc($result)) {
    $id = $data['id'];
    $pnt = $data['pnt'];
    $path = $data['path'];
    ?>
    <div>
    <img class="someClass">  
    </div>
    <?
}

Make a single modal container

<div id="myModal" class="modal">
  <span class="close">X</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

And then in your javascript you need to get a reference to each of your clickable images and set the click listener

//Define a function to use as event handler
function showImageModal(){
    modal.style.display = "block";
    modalImg.src = this.srsc;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

//Modal elements
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var modalCloseBtn = modal.querySelectorAll(".close");

//Get images by using the class we gave each image
var images = document.querySelector(".someClass");
//Loop through the images and set the click event handler
for(let i=0; i<images.length; i++){
    images[i].addEventListener("click",showImageModal);
}
modalCloseBtn.addEventListener("click",function(){
    modal.style.display = "none";
});

Demo

function showImageModal() {
  modal.style.display = "block";
  modalImg.src = this.src;
  modalImg.alt = this.alt;
  captionText.innerHTML = this.alt;
}

var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var modalCloseBtn = modal.querySelector(".close");

var images = document.querySelectorAll(".someClass");
for (let i = 0; i < images.length; i++) {
  images[i].addEventListener("click", showImageModal);
}
modalCloseBtn.addEventListener("click", function() {
  modal.style.display = "none";
});

.image-list {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  margin: auto;
}
.image-list img {
  flex: 1 1 64px;
  margin: 4px;
  cursor: pointer;
}
.modal {
  position: fixed;
  width: 75vw;
  height: 75vh;
  left: 12vw;
  top: 12vh;
  background: white;
  border: 1px solid;
  display: none;
}

.close {
  position: absolute;
  top: 0px;
  right: 0px;
  background: red;
  color: white;
  font-size: 18px;
  font-weight: bold;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}

<div class="image-list">
  <img class="someClass" src="http://placekitten.com/g/64/64" alt="caption1">
  <img class="someClass" src="http://placekitten.com/g/64/63" alt="caption2">
  <img class="someClass" src="http://placekitten.com/g/64/62" alt="caption3">
  <img class="someClass" src="http://placekitten.com/g/64/61" alt="caption4">
  <img class="someClass" src="http://placekitten.com/g/64/60" alt="caption5">
</div>
<div id="myModal" class="modal">
  <span class="close">X</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

Answer 3

It appears that you are opening the modal based upon the id attribute of the image. The id of each image needs to be unique, instead you should assign a class to the <img> tag. In the fragment below I have removed the id attribute and replaced it with class="an-image".

<div>
  <img class="an-image" src="uploads/<?php echo $path; ?>" title="<?php echo $path; ?>" alt="<?php echo $path; ?>" width="300" height="200">  
</div>

Now document.getElementsByClassName() can be used to identify the elements on which the onclick event should be captured.

<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

  // You want the onclick event to work for all elements
  // with the 'an-image' class attribute.
  var img = document.getElementsByClassName("an-image");

  var modalImg = document.getElementById("img01");
  var captionText = document.getElementById("caption");
  img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    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>