3

Tenho um modal de imagens mas só funciona com a primeira, alguém pode me ajudar ? veja o modal aqui: https://jsfiddle.net/pnavtmcx/

2 Respostas 2

8

O problema é que as duas imagens possuem o mesmo ID e é um atributo que deve ser único. Uma opção é criar um atributo qualquer e selecionar os elementos por querySelector:

Ficaria assim:

HTML

<img id="myImg1" get-img alt="Texto qualquer" width="300" height="200">
<img id="myImg2" get-img alt="Texto qualquer" width="300" height="200">

Javascript:

var imgs = document.querySelectorAll('[get-img]');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

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

JSFiddle: https://jsfiddle.net/pnavtmcx/6/

2
4

O id é um atributo que deve ser atribuído a apenas um elemento, mude o seu código para usar como 'target' do javascript a classe da imagem.

As classes são usadas justamente para poder interagir com mais de um elemento no DOM.

var x = document.getElementsByClassName("example");

Algo assim, no X ficam todos os elementos com aquela classe em um array, que começa com o index 0.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .