Lightbox de imagen básica en JavaScript puro-maxbox
| Autor: | clsedlacek |
|---|---|
| Views Total: | 1,705 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 4, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
maxbox es una pequeña biblioteca de JS independiente que muestra imágenes grandes en una ventana emergente de estilo modal y adaptable. Se le permite personalizar el fondo de superposición y los estilos de botón a través de atributos de datos HTML5.
Funcionamiento
Importe los archivos JavaScript y CSS del maxbox en el documento.
<link href="src/maxbox.css" rel="stylesheet"> <script src="src/maxbox.js"></script>
Para utilizar este lightbox de imagen, simplemente dé a cualquier elemento un atributo ' Data-maxbox-src ' con el SRC de la imagen completa:
<img src="small.jpg" data-maxbox-src="full.jpg" >
Personaliza el color de fondo y/o la imagen:
<img src="small.jpg"
data-maxbox-src="full.jpg"
data-maxbox-bg="#000"
>
<img src="small.jpg"
data-maxbox-src="full.jpg"
data-maxbox-bg="url('path/to/bg.png')"
> Personaliza la fuente & color del botón de cierre:
<img src="small.jpg" data-maxbox-src="full.jpg" data-maxbox-font="font-family: 'Roboto'" data-maxbox-color="red" >
