0

Hace poco lancé un sitio web para unos colegas, dicho sitio es para mostrar su proyecto.

Lancé 2 versiones, una en inglés y una en español. Este sitio tiene una galería de imágenes la cual, al hacerle click, ésta imagen se agranda y sale en la esquina un botón X para sacarla:

introducir la descripción de la imagen aquí

El problema viene con que el botón no funciona, literalmente. No importa el dispositivo (pc, tablet, teléfono), al hacerle click el botón no saca la imagen, forzando al usuario a recargar la página.

Lo más curioso es que éste problema sólo aparece en la versión en ingles del sitio web, ya que en la versión en español puedo cerrar la imagen sin problemas, revise y ambos códigos son exactamente iguales. ¿Porque pasa esto?

Adjunto ahora fragmentos de los códigos:

Versión en ingles:

<!-- TABLA DE SCREENSHOTS-->
<h2 style="align:center; color:white" align="center"> SCREENSHOTS (Prototype) </h2>

<table >
    <!-- PRIMERA LINEA-->
    <tr>
        <th>
            <!--IMAGEN 4-->
            <img id="04" src="officina.png" style="width:85%" align="right">
            <div id="myModal04" class="modal">
                    <span class="close">&times;</span>
                    <img class="modal-content" id="img04">
                    <div id="caption"></div>
                </div>

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

                    // Get the image and insert it inside the modal - use its "alt" text as a caption
                    var img = document.getElementById("04");
                    var modalImg = document.getElementById("img04");
                    var captionText = document.getElementById("caption");
                    img.onclick = function(){
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                    }

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

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

Versión en español:

<!-- TABLA DE SCREENSHOTS-->
<h2 style="align:center; color:white" align="center"> IM&Aacute;GENES (Prototipo)</h2>

<table>
    <!-- PRIMERA LINEA-->
    <tr>
        <th>
            <!--IMAGEN 4-->
            <img id="04" src="officina.png" style="width:85%">
            <div id="myModal04" class="modal">
                    <span class="close">&times;</span>
                    <img class="modal-content" id="img04">
                    <div id="caption"></div>
                </div>

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

                    // Get the image and insert it inside the modal - use its "alt" text as a caption
                    var img = document.getElementById("04");
                    var modalImg = document.getElementById("img04");
                    var captionText = document.getElementById("caption");
                    img.onclick = function(){
                    modal.style.display = "block";
                    modalImg.src = this.src;
                    captionText.innerHTML = this.alt;
                    }

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

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

También adjunto sitio web para que lo vean con sus propios ojos:

http://www.dualeffectgames.com

4
  • 1
    no existe una funcion onclick debe ser span.addEventListener("click",function(){ modal.style.display.none;})
    – Bryro
    Commented el 6 feb. 2020 a las 15:06
  • Reemplazo las 3 lineas en span.onclick con lo que tu pusiste?
    – Hugo
    Commented el 6 feb. 2020 a las 15:09
  • si, no obstanten podrias editar tu pregunta y colocar el codigo completo, con la opcion de fragmento javascript/hmtl/CSS o con la opcion control+M para mejorar la eficiencia de tu codigo ya que estas haciendo una funcion por cada imagen y deberia ser una para todas!
    – Bryro
    Commented el 6 feb. 2020 a las 15:15
  • Lo irónico de eso es que la función es casi igual, lo que cambia es la id, por eso no puedo hacer una para todas
    – Hugo
    Commented el 6 feb. 2020 a las 15:22

1 respuesta 1

2

primero debes remover todos tus scripts.

al final del documento debes agregar un solo script

/* una sola funcion para todos */

// buscamos los tag th que contegan el tag img con id imagenesModal
let img = document.querySelectorAll("th img#imagenesModal");
// recorremos todos los elementos img
for(x of img){
    // agregamos un listener a cada img
    x.addEventListener("click",function(e){
        // seleccionamos el modal
        let modal = document.querySelector("#allModal");
        // aplicamos el style
        modal.style.display = "block";
        // de modal buscamso a img.modal-content
        // le asignamos la imagen correspondiente al elemento clickeado
        // e.target nos regresa el elemento clickeado solamente
        modal.querySelector("img.modal-content").src = e.target.src;
        modal.querySelector("div#caption").innerText = e.target.alt;

        // agregamos un evento click para el modal
        modal.addEventListener("click",function(e){
            modal.style.display = "none";
        })
        /* o asi si quieres que se cierre solo con la x
        modal.querySelector("div span").addEventListener("click",function(e){
            modal.style.display = "none";
        }) */
    })
}

ahora el codigo html debe quedar asi para todas las imagenes

<tr>
    <th>
        <!--IMAGEN 4-->
        <img id="imagenesModal" src="http://www.dualeffectgames.com/officina.png" style="width:85%">
    </th>
        <!--IMAGEN 5-->
        <th>
        <img id="imagenesModal" src="http://www.dualeffectgames.com/galeria/18.png" style="width:85%">
    </th>
    <th>
        <!--IMAGEN 6-->
        <img id="imagenesModal" src="http://www.dualeffectgames.com/galeria/04.png" style="width:85%">
    </th>
</tr>

ahora al final despues de </table> debes agregar un solo modal

</table>
<div id="allModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content">
    <div id="caption"></div>
</div>

con tendras la funcionalidad que deseas en una sola funcion y sin tanto codigo html y sin tantos scripts

saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.