Detectar valor document.getElementById() dentro de un array

kahlito dijo:

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:

Insertar CODE, HTML o 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>

Insertar CODE, HTML o 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

Insertar CODE, HTML o 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.

Hacer clic 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 dijo:

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');
       });
    }

Hacer clic para expandir...

zcriptz dijo:

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

Para que te des una idea:

Insertar CODE, HTML o 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.

Hacer clic para expandir...

kahlito dijo:

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.

Hacer clic para expandir...

Cambiar estilo a un elemento sin 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 dijo:

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');
       });
    }

Hacer clic 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 dijo:

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?

Hacer clic 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>