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
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/
-
1
-
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.