3

Estoy empezando en esto, y mi intención es hacer una galería de imágenes desde donde el usuario pueda escoger la foto que desee utilizando dos botones. Falta depurarlo, pero cuando pruebo lo que tengo hecho hasta ahora me aparece en consola un mensaje de addEventListener is not a function.

$(document).ready(function() {
  var galeria = document.querySelectorAll("img");
  $("img").hide();
  var z = 0;

  $("#botonSiguiente").addEventListener("click", siguienteImg, false);
  $("#botonAnterior").addEventListener("click", anteriorImg, false);

  function siguienteImg() {
    galeria[z].show();
    z++;
  }

  function anteriorImg() {
    galeria[z].show();
    z--;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <center>
    <div>
      <h1>Galeria de imágenes</h1>
    </div>
    <div id="galeriaImg">
      <img src="img/casa.jpg" alt="">
      <img src="img/perro.jpg" alt="">
      <img src="img/gato.jpeg" alt="">
    </div>

    <input type="button" id="botonAnterior" value="Anterior imágen">
    <input type="button" id="botonSiguiente" value="Siguiente imágen">
  </center>
</body>

1
  • Se que las funciones de siguienteImg y anteriorImg no funcionarían para ir cambiando de imagen y se necesitarían dos clics para que haga resultado. Haría falta un condicional, etc. Pero la cosa es que no me deja avanzar por el aviso en consola de "getEventListener is not a function" y no se que estoy haciendo mal. Commented el 14 abr. 2018 a las 14:31

3 respuestas 3

4

Si no quieres hacerlo con eventos de jQuery y quieres hacerlo mediante tu código en javascript, solo tienes que sacar el ready de jquery para que las funciones estén en el contexto correcto, tampoco te hace falta la librería jquery y puedes quitarla, luego debes usar los métodos y eventos propios del lenguaje en úso, en este caso javascript:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script>
            var galeria = ""; // defines la galería en el ámbito global
            var z = 0;

            function inicio() {
                galeria = document.querySelectorAll("img"); // Ahora que ya está cargado el DOM, puedes asignar el valor.
                ocultar();
                galeria[z].style.display = "block";
            }

            function ocultar() {
                galeria.forEach(function(element) {
                    element.style.display = "none";
                });
            }

            function siguienteImg() {
                ocultar();
                z++;
                galeria[z].style.display = "block";
            }

            function anteriorImg() {
                ocultar();
                z--;
                galeria[z].style.display = "block";
            }
        </script>
    </head>
    <body onload="inicio()">
        <center>
            <div>
                <h1>Galeria de imágenes</h1>
            </div>
            <div id="galeriaImg">
                <img src="img/casa.jpg" alt="">
                <img src="img/perro.jpg" alt="">
                <img src="img/gato.jpeg" alt="">
            </div>
            <input type="button" onclick="anteriorImg()" id="botonAnterior" value="Anterior imágen" >
            <input type="button" onclick="siguienteImg()" id="botonSiguiente" value="Siguiente imágen">
        </center>
    </body>
</html>

Como puedes ver, he creado una nueva función ocultar para hacer posible el resultado. La función la llamo al inicio de la carga (se llama desde el onload del body para que en ése contexto, ya exista el DOM) y cada vez que voy a mostrar una imagen. Tamibén el método usado es distinto y ya que tu defines un array de imágenes, lo usamos para ocultarlas por medio de un forEach.

Después muestro la primera imagen del elemento y mediante el onclick de ls botones, se llama a las funciones correspondientes de adelante y atrás.

Edito: He añadido los cambios necesarios para que funcione en un nuevo documento copiando y pegando.

7
  • Siento mi ignorancia, pero es que estoy aprendiendo... cuando lo pongo en mi código sigue sin funcionae, se ve la primera imagen, pero cuando aprieto en los botones, la imagen se mantiene intacta y no aparece la siguiente. Commented el 14 abr. 2018 a las 22:50
  • Quito el sniped porque ya hemos visto que funciona y te lo pongo en formato para que puedas copiar y pegar reemplazando todo el contenido del fichero.
    – track3r
    Commented el 14 abr. 2018 a las 22:51
  • Es decir, si copio la parte de js, y la coloco entre <script> </script>, dentro de $(document).ready(function(){ , no me funciona. La parte de html está tal cual como la mía así que no hace falta cambiarla. Commented el 14 abr. 2018 a las 22:56
  • Si, entiendo lo que te ocurre, por eso acabo de editar la respuesta para que veas el ejemplo completo y funcional copiando y pegando en un nuevo documento o reemplazando en el tuyo.
    – track3r
    Commented el 14 abr. 2018 a las 23:02
  • Sigue sin funcionar :/ Bueno te agradezco igualmente tu ayuda. Commented el 14 abr. 2018 a las 23:05
4

Porque .addEventListener() es propio de javascript y no de jQuery, si lo que querés hacer es lo mismo pero con jQuery tenés que usar .on().

Usando .on() de jQuery:

$("#botonSiguiente").on("click", siguienteImg);

Usando .addEventListener() de javascript:

document.getElementById("botonSiguiente").addEventListener("click", siguienteImg, false);
0

Puedes usar .click de jquery

$("#botonstop").click(function(event) {

Para que pueda avanzar se necesita posicionar el contenido con display: inline-block para que se muestre en horizontal.

var avance = 0;
$("#boton").click(function(event) {
  console.log('retrocediendo --');
  if (avance > 0) {
    avance = avance - 500;
  }

  $("div.m_wrap > .dx").scrollLeft(avance);
});
$("#botonstop").click(function(event) {
  console.log('avanzando ++');
  if (avance < 3600) {
    avance = avance + 500;

    $("div.m_wrap > .dx").scrollLeft(avance);
  }

});
.container1 {
  padding: 10px;
  display: inline-block;
  width: 500px;
  height: 10%;
  line-height: 80px;
  text-align: center;
  margin-bottom: 4px
}

.m_wrap {
  width: 500px;
  border: 1px solid gray
}

.dx {
  overflow: hidden;
  white-space: nowrap;
  width: 500px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="margin:auto">
  <div class="m_wrap">
    <div class="dx">
      <div class="container1">imagen 1</div>
      <div class="container1">imagen 2</div>
      <div class="container1">imagen 3</div>
    </div>
  </div>
  <button id="boton">atras</button>
  <button id="botonstop">adelante</button>
</div>

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.