Skip to main content
se añadieron 868 caracteres en el cuerpo
Origen Enlace
David
  • 1.3k
  • 3
  • 17
  • 39

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 ?

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.

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 ?

se añadieron 30 caracteres en el cuerpo
Origen Enlace
David
  • 1.3k
  • 3
  • 17
  • 39

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.

MiFunciona 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.

vengo de este hilo como abrir una imagen en un popup en el cual explica como al hacer click en una imagen está se amplia en un popup de bootstrap.

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.

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.

Origen Enlace
David
  • 1.3k
  • 3
  • 17
  • 39

Imagen que al hacer click aumenta en modal bootstrap

vengo de este hilo como abrir una imagen en un popup en el cual explica como al hacer click en una imagen está se amplia en un popup de bootstrap.

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.