Lightbox Gallery
Last updated
Was this helpful?
Last updated
Was this helpful?
(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
A Servoy Extra Component that displays a lightbox gallery for images with captions and thumbnails. Component needs dataproviders from the foundset for the following: imageId, image, caption and thumbnail.
This is a reference page; many components have detailed usage guides here.
The label format for the album (e.g. "image %1 of %2"). Type: String Default Value: "image %1 of %2"
CSS style classes applied to the button. Type:
The text displayed on the button associated with the gallery. Type:
Flag indicating whether the component is enabled for user interaction. Type: Boolean Default Value: "false"
The duration (in milliseconds) of the fade effect when transitioning images. Type: Number Default Value: 600
When true, images are scaled to fit within the viewport. Type: Boolean Default Value: true
Flag indicating whether the gallery is visible. Type: Boolean Default Value: true
The icon displayed on the hover button (e.g. "fa fa-trash fa-lg"). Type: String Default Value: "fa fa-trash fa-lg"
The default / minimum value is 5 (the component will not render less than 5 images); it will load more when scrolling or using next in gallery mode. Type: Number Default Value: 5
The duration (in milliseconds) of the fade effect for image transitions. Type: Number Default Value: 600
Holds a collection of images to be displayed in the lightbox gallery. Each image object includes details such as the image URL, caption, thumbnail, and identifier. Type: Array<CustomType<servoyextra-lightboxgallery.image>>
The foundset containing the images and related dataproviders for image, caption, thumbnail and imageId. Type: JSFoundset
The maximum height for images in the gallery. Type: Number
The maximum width for images in the gallery. Type: Number
The vertical offset (in pixels) from the top when displaying the lightbox. Type: Number Default Value: 50
The duration (in milliseconds) of the resizing animation. Type: Number Default Value: 700
This will be the height of the component when used inside a responsive form; it will affect only responsive form usage. Type: Number Default Value: 300
When true, captions are displayed in the gallery. Type: Boolean Default Value: false
When true, a label showing the image number is displayed. Type: Boolean Default Value: true
When true, navigating past the last image wraps around to the first image. Type: Boolean Default Value: false
Called when the hover button is clicked.
Parameters:
Refreshes the component by reinitializing its configuration and loading data. This can be used to apply updates or reset the gallery state.
Opens the lightbox gallery at the specified index, defaulting to the first image if the index is invalid.
Parameters:
{Number} [index] The index of the image to display in the lightbox. If negative, the gallery will open at the first image.
Defines an image object for the Lightbox Gallery. scripting type: CustomType<servoyextra-lightboxgallery.image>
caption
Caption text for the image.
id
Unique identifier for the image.
Type: string
imageUrl
URL of the main image.
Type: string
thumbnailUrl
URL of the thumbnail image.
Type: string
Type: