Eine Lightbox zeigt Inhalte in einem Overlay an. Der Nutzer kann innerhalb einer Lightbox durch mehrere Inhalte navigieren, ohne die Ansicht zu verlassen. Es werden einzelne Images oder eine Image-Abfolge mit Caption abgebildet.
Grundsätzlich werden bei aktivierter Lightbox alle hinter der Lightbox liegenden Screen-Elemente abgedunkelt (siehe Dimmer). Ähnlich wie ein modaler Dialog kann eine Lightbox durch das Schließen-Icon geschlossen werden. Des Weiteren hat der Nutzer die Möglichkeit, außerhalb der Lightbox (Dimmer) zu klicken, um die Lightbox zu schließen.
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
isSequence | boolean | undefined | The lightbox has more than one image and a white bar with controls (next image, previous image, current number of image shown) underneath it. |
isExtended | boolean | undefined | * |
id | string | undefined | Unique id |
images | { src: string, srcSet: ISrcSet[], alt: string, caption: string, isCaptionOpen: boolean }[] | undefined | Array of images |
isVisible | boolean | false | hide/show the lighbox modal |
active | number | 0 | currently displayed image in sequence |
style | string | undefined | additional css styles |
Beispiele
Lightbox einzelnes Image
Lightbox einzelnes Image mit kurzer Caption
Lightbox einzelnes Image mit langer Caption
Lightbox Sequence
Lightbox Sequence mit kurzer Caption
Lightbox Sequence mit langer Caption