Zoom de imagen simple muerto en JavaScript-Lumos
| Autor: | oliverschwendener |
|---|---|
| Views Total: | 860 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 11, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Lumos es una biblioteca de zoom de imagen ultra-ligera (1Kb minificada), muerta y de alto rendimiento escrita en JavaScript puro.
La biblioteca le permite mostrar la versión más grande de la imagen con una superposición de fondo y fadeIn & animaciones fadeOut, al igual que el lightbox de imagen.
También tiene la capacidad de redimensionar automáticamente la imagen en el tamaño de la ventana, manteniendo las imágenes siempre centradas mientras se desplaza hacia abajo por la página.
See also:
- < a href = "https://wikicss.com/tag/image-zoom/" > 10 mejor imagen zoom JavaScript y bibliotecas CSS
Funcionamiento
Enlace a las Lumos ' JavaScript y StyleSheet.
<link href="dist/css/lumos.css" rel="stylesheet"> <script src="dist/js/lumos.js"></script>
Añada una etiqueta IMG con el atributo Data-Action = "Lumos" a la página web y especifique las vías de acceso a las imágenes grandes/pequeñas utilizando los atributos src y Data-src .
<img data-action="lumos" src="thumb.jpg" data-lumos-src="regular.jpg" alt="Example Image">
Personalice los estilos predeterminados de la superposición de fondo al anular el CSS predeterminado como se muestra a continuación:
div#lumos-container {
transition: all 250ms ease-in-out;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 1000;
justify-content: center;
align-items: center;
display: flex;
transform: scale(0);
opacity: 0;
cursor: zoom-out
}
