I have a gallery of images where I try that when the user clicks on each of them, that same image is displayed in large. I manage to do it with its corresponding "id" and with javascript.
Example:
<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>
<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>
So far so good, but of course if there are 20 images and I try to do it in an array when trying to get the value inside [b]document.getElementById()[/b] it doesn't recognize it
<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>
bold text How could I make it recognize the value of the id inside the array and then return it or call it when clicking on each image?
You can do this by adding a class to those images, such as the class
imagen
.Basically you have your list of images and a place to display the image as a result, we create an event that listens to the entire document and listens for the click event on an object, but if that event doesn't match the image class then it automatically abandons the event, otherwise it assigns its
src
containingurl
image attribute to the largest image (resultado
).It doesn't recognize it because the id must be in quotes....getElementById('elementID'). Try using the backtick character (`) which would mean you are using template strings. So :