I want to include a download button on each image when clicked to enlarge them in a modal. Can you help me?

  javascript

I extract from an image table (img), all the images that have just been shared to validate them.
I take the id, path and description columns of the images concerned.
I display them on the screen and it is useful to enlarge them (modal) by clicking on them for a valid moderator (or not).
The problem is as follows: I want to insert a button inside this modal to trigger a php script to validate the photo in the imgage table.

PHP line for viewing images by iteration. I don’t know how to achieve the goal. Can you help me?

<?php
for ($i=0 ; $i < $result->num_rows ; $i++) {
  $row = $result->fetch_assoc() ;
  $id = $row['id'];
  $path_img1020 = $row['path_img1020'];
  $description = $row['description'];
  echo '<img src="' . $path_img1020 . '" style="width:100%;max-width:400px;cursor:pointer" onclick="onClick(this)" class="w3-margin w3-hover-sepia">';
}
$result->free();
?>

The modal in the HTML page for receiving images:

<div id="modal01" class="w3-modal w3-dark-grey" onclick='this.style.display="none"'>
  <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
  <div class="w3-modal-content w3-animate-opacity">
    <img id="img01" style="width:100%">
  </div>
</div>
<script>
  function onClick(element) {
    document.getElementById("img01").src = element.src;
    document.getElementById("modal01").style.display = "block";
  }
</script>

Source: Ask Javascript Questions

LEAVE A COMMENT