vengo de este hilo como abrir una imagen en un popup en el cual explica en la respuesta como al hacer click en una imagen está se amplia en un popup de bootstrap.
Funciona pero mi duda es que no consigo hacer para que dicho código valga para todas las imagenes, y que cada una se amplie de la misma forma.
Solo se me ocurre copiar el codigo x veces y pegarlo cambiando los ids y más datos... pero es una chapuza.
Este es el codigo:
var modal = document.getElementById('popUp');
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;
captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
<img id="myImg" src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="Snow" width="300" height="200">
<div id="popUp" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
Como hacer para que funcione con todas las imagenes en las que hago click ?