Passing the Id to get the element when Id is dynamic in javascript and php-CodePudding

I have this sample app in which small thumbnails are shown on screen fetched from database.

Requirement : When a thumbnail is click it should open in a modal as a large image, and each image should have its own download button when popped-up .

Issue - PHP is running fine, I can open image when clicked, but I don't have any clear thoughts on how to implement a download button for each image.

Note - I use prepared statements always but this is just a sample so I didn't used anything special.

Here is my code:

<?php   while($row = mysqli_fetch_assoc($result)){?>
    
    <img id="<?php echo $row['id'] ?>" src="<?php echo $row['img_name'] ?>" alt="">

<?php } ?>
<div id="myModal" >

  <!-- The Close Button -->
  <span >&times;</span>

  <!-- Modal Content (The Image) -->
  <img  id="img">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

This is my java script

    // Get the modal
let images = document.querySelectorAll(".imgwrap > img");

var modal = document.getElementById("myModal");
for(i=0; i<images.length; i  ){
  let img = images[i];
  
  // Get the image and insert it inside the modal - use its "alt" text as a caption
  var modalImg = document.getElementById("img");
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";
}

CodePudding user response：

To display the image on the modal you have to add event listeners to each of the thumbnails. That way you can display them on the modal or do whatever you want, when an it is clicked. I've created a working demo here Codepen. Please check it out.

HTML

<div >
  <?php while($row = mysqli_fetch_assoc($result)){?>
    
    <img  id="<?php echo $row['id'] ?>" src="<?php echo $row['img_name'] ?>" alt="">

    <?php } ?>
</div>

<div  id="myModal" tabindex="-1" role="dialog">
  <div  role="document">
    <div >
      <div  id="modal-body">
      </div>
      <div >
        <button type="button" id="close-modal"  data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

//select all thumbnails on the page generated by php
let images = document.querySelectorAll(".images-wrapper > img")

//loop over all the images and bind an eventlistener on click to each images 
for(i=0; i<images.length; i  ){
  let img = images[i]
  img.addEventListener('click', showModal, false)
}

let modal = document.querySelector("#myModal")

function showModal(){
  
  //display mdodal
  modal.style.display = 'block'
  
  //select modal body element
  let modalBody = document.querySelector("#modal-body")
  
  //clear previously displayed image
  modalBody.innerHTML = ""
  
  //create an image element 
  let modalImg = document.createElement('img')
  modalImg.src = this.getAttribute('src')
  
  //create download btn
  let downloadBtn = document.createElement('a')
  // Create the text node
  let link = document.createTextNode("Download Image");
  downloadBtn.appendChild(link); 
  downloadBtn.href = this.getAttribute('src')
  downloadBtn.download = 'download'
  
  // add download btn 
  modalBody.prepend(downloadBtn)
  
  // add image element to modal body
  modalBody.appendChild(modalImg);
  
}

let closeBtn = document.querySelector("#close-modal")
closeBtn.addEventListener('click', closeModal, false)

//close modal
function closeModal(){
  modal.style.display = 'none'
}