Cómo construir una lupa de imagen con Vanilla JavaScript

Si alguna vez ha navegado por un sitio web de compras, probablemente se haya topado con la función de lupa de imágenes. Le permite acercar una parte específica de una imagen para una vista más cercana. La incorporación de esta característica pequeña pero impactante puede mejorar en gran medida la experiencia del usuario en su propio sitio web.

Construir una lupa de imágenes de una manera uniforme y cohesiva puede ser un desafío. Pero seguir estos pasos lo ayudará a crear su propia lupa de imágenes desde cero, sin necesidad de depender de complementos de terceros.

Cuándo usar una lupa de imagen en su proyecto web

Una lupa de imágenes puede ser útil cuando está creando un proyecto con muchas imágenes. Como se mencionó anteriormente, las lupas de imágenes son muy populares entre los sitios web de compras porque a veces el usuario puede necesitar mirar más de cerca el producto antes de decidir si vale la pena comprarlo.

Los clientes confían únicamente en la información y las imágenes proporcionadas por el sitio web para evaluar la calidad, las características y la apariencia de un producto. Sin embargo, es posible que las imágenes estáticas por sí solas no siempre brinden suficiente claridad o permitan una evaluación completa del artículo.

En las tiendas tradicionales, los clientes pueden manipular físicamente los productos, examinarlos de cerca y evaluar su idoneidad antes de comprarlos. Las lupas de imágenes intentan recrear esta experiencia ofreciendo a los usuarios un nivel similar de escrutinio y examen virtualmente.

Las lupas de imágenes también pueden ser útiles si está construir una aplicación de galería de fotos ya que hacer zoom en una parte específica de la imagen es una característica importante.

Construcción de la lupa de imágenes

El código utilizado en este proyecto está disponible en un repositorio GitHub y es gratis para su uso bajo la licencia MIT.

Cree una carpeta y, en esa carpeta, agregue un índice.html archivo, estilo.css archivo y principal.js archivo. Agregue este código repetitivo a index.html:

html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8" />
<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0" />
<título>Lupa de imagentítulo>
<enlacereal="hoja de estilo"href="estilo.css" />
cabeza>
<cuerpo>
cuerpo>
html>

Dentro de cuerpo etiqueta, cree un elemento div con el nombre de clase "encabezado". Luego, en el div "encabezado", agregue un h1 elemento de encabezado para mostrar el título de la lupa de su imagen.

Puede personalizar el texto para adaptarlo a sus necesidades. A continuación, incluya dos elementos de intervalo que proporcionen instrucciones para usar la lupa y muestren el nivel de zoom actual al usuario.

Después de la sección de encabezado, cree una división elemento con el nombre de clase "contenedor". Dentro de este div, agregue otro elemento div con el nombre de clase "lupa" y aplique la clase "oculta" para ocultarlo de la vista.

Este elemento representará la imagen de la lupa. Luego, agregue una etiqueta de secuencia de comandos con el atributo "src" establecido en "/main.js".

<cuerpo>
<divisiónclase="encabezamiento">
<h1>Lupa de imagenh1>
<durar>Prensa <fuerte>Flecha arribafuerte> o <fuerte>flecha abajofuerte> a
 aumentar o disminuir el nivel de zoom.durar>
<durar>Nivel de zoom: <fuerteclase="nivel de zoom">1fuerte>durar>
división>
<divisiónclase="envase">
<divisiónclase="lupa oculta">división>
división>
<guionorigen="/principal.js">guion>
cuerpo>

Reemplace el código en el estilo.css archivo con lo siguiente. También puedes usar un Preprocesador CSS como Less si quieres:

:raíz {
--lupa-ancho: 150;
--lupa-altura: 150;
}
cuerpo {
mostrar: doblar;
dirección de flexión: columna;
alinear elementos: centro;
}
.envase {
ancho: 400píxeles;
altura: 300píxeles;
tamaño de fondo: cubrir;
imagen de fondo: URL("https://disco compacto.pixabay.com/foto/2019/03/27/15/24/animal-4085255_1280.jpg");
repetición de fondo: sin repetición;
posición: relativo;
cursor: ninguno;
}
.lupa {
borde-radio: 400píxeles;
sombra de la caja: 0píxeles 11píxeles 8píxeles 0píxeles#0000008a;
posición: absoluto;
ancho: calcular(variable(--lupa-ancho) * 1píxeles);
altura: calcular(variable(--lupa-altura) * 1píxeles);
cursor: ninguno;
imagen de fondo: URL("https://disco compacto.pixabay.com/foto/2019/03/27/15/24/animal-4085255_1280.jpg");
repetición de fondo: sin repetición;
}
durar {
mostrar: bloquear;
}
.encabezamiento {
mostrar: doblar;
dirección de flexión: columna;
alinear elementos: centro;
}
.oculto {
visibilidad: oculto;
}
división > durar:nth-hijo (3) {
tamaño de fuente: 20píxeles;
}

En el principal.js archivo, recupere los elementos HTML con nombres de clase, "lupa" y "contenedor" usando el documento.querySelector método y asignarlos a las variables lupa y envase, respectivamente.

Entonces, usando el getComputedStyle función recuperar el ancho y altura del elemento lupa y luego extraer los valores numéricos de las cadenas devueltas usando el subcadena y índice de métodos.

Asigne el ancho extraído a la variable ancho de lupa, y la altura extraída a lupaAltura.

dejar lupa = documento.querySelector(".lupa");
dejar contenedor = documento.querySelector(".envase");
dejar magnifierWidth = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).width.indexOf("pag")
);
dejar magnifierHeight = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).height.indexOf("pag")
);

A continuación, configure las variables para el nivel de zoom, el nivel máximo de zoom y las posiciones del cursor y la imagen de la lupa.

dejar zoomLevelLabel = documento.querySelector(".nivel de zoom");
dejar acercar = 2;
dejar maxZoomLevel = 5;
dejar punteroX;
dejar punteroY;
dejar magnificarX;
dejar magnificarY;

En el bloque de código anterior, punteroX y punteroY ambos representan la posición del cursor a lo largo de los ejes X e Y.

Ahora, defina dos funciones auxiliares: obtener nivel de zoom que devuelve el nivel de zoom actual, y getPointerPosition que devuelve un objeto con el X y y coordenadas del cursor.

funciónobtener nivel de zoom() {
devolver zoom;
}
funcióngetPointerPosition() {
devolver { X: punteroX, y: puntero Y }
}

A continuación, cree agregar un actualizarMagImage función que crea un nuevo objeto MouseEvent con la posición actual del cursor y lo envía al elemento contenedor. Esta función es responsable de actualizar la imagen de la lupa.

funciónactualizarMagImage() {
dejar ev = nuevo evento del ratón("movimiento del ratón", {
 clienteX: obtenerPosiciónPuntero().x,
 clienteY: obtenerPosiciónPuntero().y,
 burbujas: verdadero,
 cancelable: verdadero,
 vista: ventana,
 });
 contenedor.dispatchEvent (evt);
}

Ahora, debes agregar un oyente de eventos al objeto de ventana para el evento "keyup" que ajusta el nivel de zoom cuando el usuario presiona las teclas "ArrowUp" o "ArrowDown".

La función de devolución de llamada en el evento "keyup" también es responsable de actualizar la etiqueta del nivel de zoom y activar el actualizarMagImage función.

ventana.addEventListener("tecla Arriba", (e) => {
si (e. clave "Flecha arriba" && maxZoomLevel - Número(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 ampliar = ampliar + 0.3;
 actualizarMagImage();
 }
si (e. clave "flecha abajo" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 ampliar = ampliar - 0.3;
 actualizarMagImage();
 }
});

Luego agregue un detector de eventos al elemento contenedor para el evento "mousemove".

​​​​​​

En la función de devolución de llamada, agregue la funcionalidad que elimina la clase "oculta" del elemento de lupa para hacerlo visible y calcula la posición del mouse en relación con el contenedor, tomando la página de desplazamiento en cuenta.

Esta función también debe establecer el estilo de transformación de la lupa en la posición calculada, y determine el tamaño de fondo y la posición de la imagen de la lupa según el nivel de zoom y el mouse posición.

contenedor.addEventListener("movimiento del ratón", (e) => {
 lupa.classList.remove("oculto");
dejar rect = contenedor.getBoundingClientRect();
dejar x = e.pageX - rect.left;
dejar y = e.pageY - rect.top;
 x = x - ventana.desplazamientoX;
 y = y - ventana.scrollY;
 lupa.style.transform = `traducir(${x}píxel, ${y}píxeles)`;
constante imgAncho = 400;
constante imgHeight = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgAltura * getZoomLevel() + "px";
 magnificarX = x * obtenerNivelZoom() + 15;
 magnificarY = y * obtenerNivelZoom() + 15;
 magnifier.style.backgroundPosition = -magnificarX + "px" + -ampliarY + "px";
});

Luego agregue otro detector de eventos al elemento contenedor, pero esta vez el detector de eventos debe escuchar el evento "mouseout" y agregue la clase "oculta" nuevamente al elemento de lupa cada vez que el mouse esté fuera del contenedor área.

contenedor.addEventListener("ratón fuera", () => {
 lupa.classList.add("oculto");
});

Por último, agregue un detector de eventos al objeto de ventana para el evento "mousemove" que actualiza las posiciones x e y del cursor.

ventana.addEventListener("movimiento del ratón", (e) => {
 punteroX = e.clienteX;
 punteroY = e.clienteY;
});

¡Eso es todo! Ha logrado construir una lupa de imagen con JavaScript estándar.

Cómo las lupas de imágenes mejoran la experiencia del usuario

Al permitir a los usuarios hacer zoom en áreas específicas de una imagen, una lupa les permite examinar los detalles del producto con mayor claridad.

Este nivel mejorado de exploración visual infunde confianza en los usuarios, ya que pueden tomar decisiones informadas. Esto puede contribuir a aumentar las tasas de conversión y mejorar la retención de clientes.