¿Cómo utilizar una lente de aumento en las imágenes en Webflow?

Guión

Documentación

Ejemplo

Ver demostración

Clonar

Utilice la lupa de imágenes de Refokus para ayudar a los usuarios a ver más de cerca las imágenes de su proyecto.

Paso 1

Copiar el

Image Magnifier

<script> and paste it before the </body> of your page

Copiar el código de la secuencia de comandos

<script

src=

"

https://tools.refokus.com/magnifier/bundle.v1.0.0.js

"

></script>

¡Copiado!

Paso 2

Establecer atributos personalizados

Todo se hace con atributos personalizados, así que cuando decimos "Añadir" significa "Añadir un atributo personalizado".
Más información

enlace de anclaje

Notas generales

Aclaración: Parte de la funcionalidad de la herramienta es establecer overflow:hidden al cuerpo cuando la lupa está activa, esto evita cualquier desplazamiento horizontal si una imagen se coloca demasiado cerca del borde de la pantalla.

Paso 3

Publique su sitio en el dominio de ensayo para probar que la herramienta funciona.

Demostración clonable

Publique su sitio en el dominio de ensayo para probar que la herramienta funciona.

¡Gracias!

Ups! Algo salió mal al enviar el formulario.

Danos tu opinión

Image Magnifier

Copiar el

Image Magnifier

<script> and paste it before the </body> of your page

Establecer atributos personalizados

Publique su sitio en el dominio de ensayo para probar que la herramienta funciona.

Demostración clonable

Publique su sitio en el dominio de ensayo para probar que la herramienta funciona.

¿Tienes un proyecto? Hablemos.

Únete al equipo