0

Actualmente tengo una galería de imágenes que funciona perfectamente cuando la visualizo mediante una pantalla de pc o laptop e inclusive una tablet, pero el problema viene cuando quiero visualizarla a la medida en un dispositivo móvil ya que simplemente desaparece:

// Esta parte del código hace que funcione correctamente la galería
function slideShow() {
  document.getElementById('Galeria').src = imgArray[curIndex];
  curIndex++;
  if (curIndex == imgArray.length) {
    curIndex = 0;
  }
  setTimeout("slideShow()", imgDuration);
}
#Galeria {
  width: 100%;
  height: 100%;
  margin: auto;
}
<div class="col-xs-6 hidden-lg hidden-md contenedores" id="contenedorGaleria">
  <center>
    <img class="img-responsive" id="Galeria" />
  </center>
</div>

Nota: esto funciona en pantallas laptop, desktop y tablets pero no en móviles.

3
  • ¿No será que estas pasando la funcion en el setTimeout como string?
    – B. Pato
    Commented el 13 abr. 2018 a las 23:49
  • 1
    @B.Pato A setTimeout se le puede pasar como parámetro un string que será evaluado (y por ello puede sufrir los mismos problemas y vulnerabilidades que el eval y no es muy recomendado).
    – Alvaro Montoro
    Commented el 14 abr. 2018 a las 3:00
  • @David lee sobre cómo crear un ejemplo mínimo verificable y edita la pregunta para añadir uno y que podamos reproducir el problema para ayudarte de forma más efectiva.
    – Alvaro Montoro
    Commented el 14 abr. 2018 a las 3:03

1 respuesta 1

0

Acabo de probarlo en el móvil (Android 5.1.1 y firefox) y me funciona solo he tenido que declarar a mayores un array con la localización de las imagenes, la posición de inicio del array, el tiempo que se muestran y añadir un evento que lance la función despues de que este cargado el bloque de la galeria.

No tengo conocimientos de bootstrap, no se si lo he añadido correctamente, lo único que veo que afecta la visibilidad son las clases hidden. Bootstrap Example

    <!DOCTYPE html>
    <html> 
        <head>
            <title>Titulo de la web</title>
            <style>
                #Galeria {
                  width: 100%;
                  height: 100%;
                  margin: auto;
                }
            </style>
            <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script>
                //var imgArray = ["imagen01.jpg","https://web.com/imagen02.jpg","imagen03.jpg"];
                var imgArray = ["https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wikipedia-logo-v2-es.svg/1200px-Wikipedia-logo-v2-es.svg.png","https://upload.wikimedia.org/wikipedia/commons/1/1f/Wikipedia_mini_globe_handheld.jpg"];
                var curIndex = 0;
                var imgDuration = 3000;
                function slideShow() {
                    document.getElementById('Galeria').src = imgArray[curIndex];
                    curIndex++;
                    if (curIndex == imgArray.length) {
                        curIndex = 0;
                    } 
                    setTimeout("slideShow()", imgDuration);
                }
                
                window.addEventListener('load',slideShow);
            </script>
        </head>
        <body class="container-fluid">
            <div class="col-xs-6 hidden-lg hidden-md contenedores" id="contenedorGaleria">
                <center>
                    <img class="img-responsive" id="Galeria" />
                </center>
            </div>
        </body>
    </html>

1
  • col-xs-6 Y si importas los cdn de bootstrap y lo metes en un row HASTA quizás funcione...
    – EduBw
    Commented el 14 abr. 2018 a las 12:27

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.