0

Tengo un listado de imagenes, a la cual le quiero agregar el efecto zoom on hover con la librería JS IMAGE ZOOM

<script src="https://unpkg.com/[email protected]/js-image-zoom.js" type="application/javascript"></script>

Código HTML

<div class="img-container" style="width: 400px">
    <img src="https://github.com/malaman/js-image-zoom/blob/master/example/1.jpg raw=true"/>
</div>
<div id="img-container" style="width: 400px">
    <img src="https://github.com/malaman/js-image-zoom/blob/master/example/1.jpg raw=true" />
</div>

Código JS

var options1 = {
    width: 400,
    zoomWidth: 500,
    offset: {vertical: 0, horizontal: 10},
};
new ImageZoom(document.getElementById("img-container"), options1);

Ahora bien, funciona perfectamente pero el problema es que solo por ID (por obvias razónes no se puede repetir) con document.getElementById() pero al momento de hacerlo con document.getElementsByClassName() (para que tome todas las imagenes con esa clase) deja de funcionar.

9
  • Y que te impide usar simplemente CSS ? Es más fácil, menos librería, y la misma función ...? el 8 nov. 2022 a las 23:16
  • Honestamente no conozco mucho de forma nativa, se me hizo sencillo usar una librería
    – Minor
    el 8 nov. 2022 a las 23:21
  • Exactamente para hacer zoom una imagen, se necesita solamente una línea de código de css. En realidad el 8 nov. 2022 a las 23:24
  • ¿Podrías comentar cuál es o dejar tu ejemplo? ¡Por favor!
    – Minor
    el 8 nov. 2022 a las 23:29
  • 1
    .img-container:hover img { transform: scale(1.5). Aunque esto funcione, hay que arreglar algunas cosas el 8 nov. 2022 a las 23:35

1 respuesta 1

1

Generalmente cuando en estas librerias te piden ingresar eso: document.getElementById("img-container"), lo que te están pidiendo es el elemento en cuestión, no el ID. Por lo que haciendo un querySelectorAll no deberias tener problemas

var options1 = {
    width: 400,
    zoomWidth: 500,
    offset: {vertical: 0, horizontal: 10},
};
document.querySelectorAll(".img-container").forEach(e =>{
   new ImageZoom(e, options1);
});

1
  • ¡Muchísimas gracias!
    – Minor
    el 9 nov. 2022 a las 0:17

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.