Modales

Ejemplo de modal con imagen

Los modales son contenedores a los que les colocaremos la clase modal.

FastLight automatiza la creación de modales con imágenes mediante el fichero public/js/BigPicture.js. Para usarlo, tan solo tenemos que incluir el fichero con <script src="/js/BigPicture.js"> y añadir la clase enlarge-image a las imágenes que queramos que se amplien mediante un modal.

La clase pointer sirve para que se muestre el cursor tipo "mano" al pasar el ratón por encima, con lo que el usuario intuirá que se puede hacer clic.

Podemos añadir un par de líneas de texto oculto, que sí se mostrará en el modal, usando la propiedad data-description de HTML en la imagen.

Ejemplo de galería con modales

En este ejemplo se muestra el aspecto de una galería con el CSS por defecto en FastLight. Para hacerla, he colocado un contenedor con las siguientes clases:

• gallery: le da el aspecto y aplica el flex.
• w75: para que ocupe el 75% del ancho disponible.
• centered-block: centrado en el documento.
• my2: aumentar el espacio vertical con otros elementos.

Las figuras dentro de la galería tienen las clases:

• small: tamaño pequeño.
• card: forma de tarjeta
• pointer: mostrar el cursor como apuntador (usabilidad).

Las imágenes tienen la clase enlarge-image para que el script en el fichero js/BigPicture.js les añada el manejador de evento clic y las convierta en "extensibles" (se abran en el modal).