LightboxImageController
Purpose
To expand/show images in a lightbox view, for galleries or expanding thumbnails.
Actions
| Action | Purpose |
|---|---|
open | Creates and opens a <dialog>, with a copy of the given image. |
close | Called automatically when the used presses Esc or clicks away from the <dialog>, but can be called manually to close and remove the <dialog> and cleanup. |
Targets
| Target | Purpose | Default |
|---|---|---|
- | - | - |
Classes
| Class | Purpose | Default |
|---|---|---|
modal (Optional) | The class(es) to apply to the created <dialog> element | image-lightbox-dialog |
image (Optional) | The class(es) to apply to the <img> inside the <dialog> | image-lightbox-image |
Values
| Value | Type | Description | Default |
|---|---|---|---|
src (Optional) | String | If you wish to override the src given to the image rendered inside the <dialogue> to be different to the src of the controller attached image | The src attribute of the controller element |
srcSet (Optional) | String | If you wish to override the srcSet given to the image rendered inside the <dialogue> to be different to the controller srcSet of the attached image | The srcSet attribute of the controller element |
sizes (Optional) | String | If you wish to override the sizes given to the image rendered inside the <dialogue> to be different to the sizes of the controller attached image | The sizes attribute of the controller element |
Events
| Event | When | Dispatched on | event.detail |
|---|---|---|---|
- | - | - | - |
Side Effects
When the open action runs the controller will create a <dialog> element and insert it after the controller root element, and immediately open it.
There is also an event listener installed on the created <dialog> element to handle closing it when the user presses Esc or clicks away.
How to Use
This controller needs to be mounted on an <img> tag to work.
On the open action - the controller will create a <dialog> element, insert it into the DOM after the controller root element, and immediately open it. You will want to style this according to your application, some examples are given below.
The <dialog> will have only one element inside of it, a new <img> with the src, srcset and sizes attributes either taken from the values API or copied from the controller root element.
Polyfills
If you are building applications for browser versions that do not support the <dialog> element,
you will need to include the dialog-polyfill.
This is not included in the Stimulus library.