Tengo esta aplicación de muestra en la que se muestran pequeñas miniaturas en la pantalla extraídas de la base de datos.
Requisito: cuando se hace clic en una miniatura, debe abrirse en un modal como una imagen grande, y cada imagen debe tener su propio botón de descarga cuando aparece.
Problema: PHP funciona bien, puedo abrir la imagen al hacer clic en ella, pero no tengo ideas claras sobre cómo implementar un botón de descarga para cada imagen.
Nota: siempre uso declaraciones preparadas, pero esto es solo una muestra, por lo que no usé nada especial.
Aquí está mi código:
<?php while($row = mysqli_fetch_assoc($result)){?> <img id="<?php echo $row['id'] ?>" src="<?php echo $row['img_name'] ?>" alt=""> <?php } ?> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close">×</span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img"> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div>Este es mi script java
// 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"; }Para mostrar la imagen en el modal, debe agregar detectores de eventos a cada una de las miniaturas. De esa manera, puede mostrarlos en el modal o hacer lo que quiera, cuando se hace clic en él. He creado una demostración de trabajo aquí Codepen . Por favor, míralo.
HTML
<div class="images-wrapper"> <?php while($row = mysqli_fetch_assoc($result)){?> <img class="gallery-img" id="<?php echo $row['id'] ?>" src="<?php echo $row['img_name'] ?>" alt=""> <?php } ?> </div> <div class="modal" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body" id="modal-body"> </div> <div class="modal-footer"> <button type="button" id="close-modal" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>JS
//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' }