Tengo una dificultad al agregar un evento a las imágenes que tengo dentro de una tabla para que ejecuten una función que mostrará una imagen modal al darle clic.
Tengo una tabla de productos de supermercado con varias columnas, con paginación y con barra de búsqueda hecha con bootstrap 5 y bootstrap-table, en una de las columnas muestro una imagen miniatura de cada producto. Intento hacer que las imágenes sea imágenes modales para que el usuario pueda ampliarlas siguiendo el ejemplo de w3schools, adaptándolo a mi aplicación.
El problema radica en que no logro agregar los EventListener desde JavaScript de una forma discreta (separando html y JavaScript).
Mi código html es el siguiente:
<div class="container">
<br/>
<div class="col-md-10 mx-auto" >
<table class="table table-bordered table-hover text-center"
data-toggle="table"
data-pagination="true"
data-page-size="5"
data-search="true">
<thead>
<tr >
<th data-width=300" >Nombre</th>
<th data-width="150" >Cantidad</th>
<th data-width="100" >Precio</th>
<th >Imagen</th>
</tr>
</thead>
<tbody>
<?php foreach($listaProductos as $producto){ ?>
<tr>
<td class="fs-5"> <?php echo $producto['nombre']; ?> </td>
<td> <?php echo $producto['cantidad']; ?> </td>
<td class="fw-bold" > $ <?php echo $producto['precio']; ?> </td>
<td>
<img class="myImg" id="<?php echo $producto['imagen']; ?>" src="./imagenes/<?php echo $producto['imagen']; ?>" style="width:105px;height:120spx;" >
</td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
Como pueden ver, los elementos img que agrego con php dentro del la última columna de la tabla tendrán una clase en común y un id distinto cada uno.
En cuanto a mi código JavaScript con el que intento agregarles la función que hará todo acerca de la imagen modal, es el siguiente:
document.querySelectorAll(".myImg").forEach(el => {
el.addEventListener("click", e => {
const id = e.target.getAttribute("id");
console.log("Se ha clickeado el id "+id);
// 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 modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = "imagenes/"+id;
// 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";
}
});
});
Y esto es lo que no me está funcionando. Ya verifiqué que el document.querySelectorAll(".myImg") esté obteniendo todas las img y sí lo hace. También estoy implementando el css correspondiente para que las imágenes tengan un grado de opacidad al pasar el cursor sobre ellas mediante la clase myImg, use está última implementación o no sigue sin funcionar. Tambien, como pueden ver, intento imprimir en consola del navegador para detectar la imagen seleccionada y nunca imprime nada.
Lo qué me funcionó fue colocar el evento y la función directamente en el html dentro de img como muestro aquí:
<img onclick="MostrarImg()" class="myImg" id="<?php echo $producto['imagen']; ?>" src="./imagenes/<?php echo $producto['imagen']; ?>" style="width:105px;height:120spx;" >
y la funcion MostrarImg de JavaScript queda de la siguiente manera, que como pueden ver, es practicamente lo mismo, salvo la forma en que obtengo el id del la imagen que originó el evento:
function MostrarImg(clicImg) {
var eventoImg = clicImg || window.event;
var id = eventoImg.target.getAttribute("id");
// 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 modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = "imagenes/"+id;
// 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";
}
}
A pesar de qué este último ejemplo es el que me funcionó, no es lo qué quiero en cuanto a implementación ya que quiero que quede en una forma de JavaScript discreto.
Otra cosa qué me funcionó fue colocar una clase al elemento table con la cual obtenerla a partir de document.querySelectorAll("clase") y agregarle el EventListener a todo elemento que contenga, pero el problema es que cuando cliqueo en cualquier cosa que no sea una imagen, también se lanza el modal pero sin imagen lol.
Agradecería qué alguien me pueda ayudar con esto. No veo dónde esté radicando el error al agregar el evento que lance la imagen modal a cada imagen en mi primer ejemplo.
<th data-width=300" >Nombre</th>
... tiene que ser asi:<th data-width="300" >Nombre</th>
... y luego no cierras el<div id="container">
al final del código mostrado (seguramente hay más código, lo digo por si acaso)... No se si tiene nada que ver con tu problema aun, pero de momento corrige eso<img class="myImg" id="<?php echo $producto['imagen']; ?>" src="./imagenes/<?php echo $producto['imagen']; ?>
... es decir, ¿le estas poniendo como id el nombre de la imagen? Aunque html5 lo permite no se si es buena idea, la verdad, es tu decisión (espero que los productos nunca compartan imagenes).document.querySelectorAll(
, pues no lo cierras adecuadamente. Te falta esto al final para cerrar esa funcion:});
... sigo mirando