Detectar valor document.getElementById() dentro de um array

kahlito disse:

Hola.

Tengo una galería de imágenes donde intento que cuando el usuario haga click en cada una de ellas se muestre esa misma imagen en grande. Lo logro hacer con su correspondiente "id" y con javascript.

Ejemplo:

Inserir CODE, HTML ou PHP:

<li><img id="azul" src="img/azul.png" ></li>
<li><img id="amarillo" src="img/amarillo.png" ></li>
<li><img id="verde" src="img/verde.png" ></li>
<li><img id="rojo" src="img/verde.png" ></li>

Inserir CODE, HTML ou PHP:

<script>
// Get the modal //
var modal = document.getElementById("myModal");


var img1 = document.getElementById("azul");
var img2 = document.getElementById("amarillo");
var img3 = document.getElementById("verde");
var img3 = document.getElementById("rojo");

var modalImg = document.getElementById("img-modal-grande");
var captionText = document.getElementById("caption");

//Click en imágenes a mostrar
img1.onclick = function(){
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

img2.onclick = function(){
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img3.onclick = function(){
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
img4.onclick = function(){
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

</script>

Hasta aquí bien, pero claro si son 20 imágenes e intento hacerlo en un array al intentar coger el valor dentro de document.getElementById() no lo reconoce

Inserir CODE, HTML ou PHP:

<script>

var modal = document.getElementById("myModal");

//Coge el valor para luego devolverlo al hacer onclick


var myArray = ['azul', 'amarillo', 'verde', 'rojo' ];

for(i=0;i<myArray.length;i++){
  
    var img = document.getElementById(myArray[i]);

    //Prueba añadiendo de nuevo el valor a id, donde aquí si lo reconoce pero al hacer clien en la imagen luego no hace la fución.
    //var img = document.getElementById(myArray[i]).id = myArray[i];  

}

var modalImg = document.getElementById("img-modal-grande");
var captionText = document.getElementById("caption");

//Click en imágenes a mostrar
img.onclick = function(){
  modal.style.display = "flex";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

</script>

¿Cómo podría hacer que reconozca el valor del id dentro del array para luego devolverlo o llamarlo al hacer click en cada imagen?

Saludos.

Clique para expandir...

// seleccionamos todas las img dentro de la lista (li)
var images = document.querySelectorAll("li > img");

for (i = 0; i < images.length; i++) {
        images[i].addEventListener("click", function(){
             modal.style.display = "flex";
            modalImg.src = this.getAttribute('src');
            captionText.innerHTML = this.getAttribute('alt');
       });
    }

Stron disse:

Lo mejor es hacer un queryselectorAll y un for para seleccionar todas las imágenes, y posteriormente ahí crear la función click.
Asi te ahorras mucho código innecesario.

JavaScript:

// seleccionamos todas las img dentro de la lista (li)
var images = document.querySelectorAll("li > img");

for (i = 0; i < images.length; i++) {
        images[i].addEventListener("click", function(){
             modal.style.display = "flex";
            modalImg.src = this.getAttribute('src');
            captionText.innerHTML = this.getAttribute('alt');
       });
    }

Clique para expandir...

zcriptz disse:

Puedes usar "this" en las imágenes para no tener que ponerle una ID a todas.

Para que te des una idea:

Inserir CODE, HTML ou PHP:

<img src="imagen.png" style="width:150px" onclick="this.style.width='300px'">

Se agrandará al doble al hacerle click. (Sin IDs)

También puedes usar getElementByClassName O getElementByTagName para tomar todas las imágenes.

Clique para expandir...

kahlito disse:

Muchas gracias Stron, funciona perfecto.




Gracias zcriptz, aunque finalmente he usado la opción de Stron esta también me sirve para aprendizaje y usarlo en otra ocasión.

De nuevo gracias a ambos por vuestra ayuda.

Saludos.

Clique para expandir...

Mudar estilo de um elemento sem usar getElementById

<script> function fontSize(e, v){ e.style.fontSize = v; } </script> <span style="font-size:20px;cursor:pointer" onmouseenter="fontSize(this, '30px')" onmouseout="fontSize(this, '20px')">Texto</span> Esta es una forma...

forobeta.com

Stron disse:

Lo mejor es hacer un queryselectorAll y un for para seleccionar todas las imágenes, y posteriormente ahí crear la función click.
Asi te ahorras mucho código innecesario.

JavaScript:

// seleccionamos todas las img dentro de la lista (li)
var images = document.querySelectorAll("li > img");

for (i = 0; i < images.length; i++) {
        images[i].addEventListener("click", function(){
             modal.style.display = "flex";
            modalImg.src = this.getAttribute('src');
            captionText.innerHTML = this.getAttribute('alt');
       });
    }

Clique para expandir...

<li>
<img src="img/azul.png" >
<p class="overlay-img overlayBottom"><span class="text-port">2003/2004</span></p>
</li>

<li>
<img src="img/amarillo.png" >
<p class="overlay-img overlayBottom"><span class="text-port">2005</span></p>
</li>

<li>
<img id="azul" src="img/verde.png" >
<p class="overlay-img overlayBottom"><span class="text-port">2006</span></p>
</li>

<li>
<img src="img/rojol.png" >
<p class="overlay-img overlayBottom"><span class="text-port">2007</span></p>
</li>

kahlito disse:

Hola de nuevo.

Después de realizar algunas mejoras y añadidos he agregado en el html la opción de una capa superpuesta que solo sale al hacer :hover posicionando el ratón por encima de la imagen para mostrar una pequeña descripción y claro, ahora no puedo hacer click directamente en la imagen. El cambio o añadido es este:

HTML:

<li>
<img src="img/azul.png" >
<p class="overlay-img overlayBottom"><span class="text-port">2003/2004</span></p>
</li>

<li>
<img src="img/amarillo.png" >
<p class="overlay-img overlayBottom"><span class="text-port">2005</span></p>
</li>

<li>
<img id="azul" src="img/verde.png" >
<p class="overlay-img overlayBottom"><span class="text-port">2006</span></p>
</li>

<li>
<img src="img/rojol.png" >
<p class="overlay-img overlayBottom"><span class="text-port">2007</span></p>
</li>

¿Como puedo hacer ahora para que cuando el usuario pulse sobre esa capa nueva con p o span logre llamar al src de la imagen dentro del mismo <li></li>? ¿Es posible?

Clique para expandir...

<script>
var images = document.querySelectorAll(".lista4 > li");

for (i = 0; i < images.length; i++) {
        images[i].addEventListener("click", function(){
             //alert(this.children[0].getAttribute('src'));
             modal.style.display = "flex";
            modalImg.src = this.children[0].getAttribute('src');
            captionText.innerHTML = this.children[0].getAttribute('alt');
       });
    }
</script>