0

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">&times;</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 ?

3 respuestas 3

2

Bueno mi fuerte no es JavaScript pero haría lo siguiente

Crearia un div con id imagenes para encerrar todas las imágenes deseadas

<div id="imagenes">
    <img id="myImg" src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="Snow" width="300"
        height="200">

    <img id="myImg" src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="Snow"
            width="300" height="200">

    <img id="myImg" src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="Snow"
                width="300" height="200">

    <img id="myImg" src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg"
                    alt="Snow" width="300" height="200">
</div>

Buscaría este div mediante su id y agregaría los element img dentro de el mismo

var img = document.getElementById('imagenes').getElementsByTagName('img');

Luego crearía un for que recorra este div con sus respectivos img encontrados, y cambiara img.onclick por img[i].onclick

for(i=0;i<img.length;i++){
    img[i].onclick=function(){
        modal.style.display='block';
        modalImg.src=this.src;
        captionText.innerHTML=this.alt;
    }
}

Como te comente no utilizo mucho js no se si es la mejor manera de hacer esto. Saludos

1

En vez de usar ID, asigna clase a las imágenes, las obtienes con .querySelectorAll('.nombre-de-clase'); y recorres para asignar el evento:

// Obtener todas las imágenes por clase
var imgs = document.querySelectorAll('.myImg');
var modal = document.getElementById('popUp');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

// Recorrer todas las imágenes
imgs.forEach(img => {
  // Asignar evento
  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";
}
.myImg {
  width:300px;
  height:200px;
}
<img class="myImg" src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="Tiger">

<img class="myImg" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Airplane">

<div id="popUp" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

1

1.- Si el evento de tipo click lo deseas aplicar a más imágenes, tendrías que agregarle una clase a todas, ya que no podrás acceder a ellas mediante el ID, por qué recuerda que no se debe repetir el ID en ninguno de los elementos.

2.- El código que muestras es algo antiguo, ya que utiliza el onclick te recomiendo utilizar eventos propios de Javascript addEventListener

Entonces tu código quedaria como el siguiente:

let modal = document.getElementById('popUp');

/*Supongamos que a todas tus imágenes les agregas la clase myImg entonces accedemos a ellas mediante esa clase*/

let imganes = document.querySelectorAll('.myImg');

let modalImg = document.getElementById("img01");
let captionText = document.getElementById("caption");

/*agregamos el evento a todas las imágenes, pero para poder hacer esto tenemos que iterarlas*/

imagenes.forEach(imagen =>{
 imagen.addEventListener('click',función(){
 modal.style.display = "block";

modalImg.src = this.src;

captionText.innerHTML = 
this.alt;

})

}) 

Intenta hacerlo y me dices que pasó.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.