Lightbox Gallery
(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.
Properties
albumLabel
The label format for the album (e.g. "image %1 of %2"). Type: String Default Value: "image %1 of %2"
buttonStyleClass
CSS style classes applied to the button. Type: Styleclass
buttonText
The text displayed on the button associated with the gallery. Type: Tagstring
enabled
Flag indicating whether the component is enabled for user interaction. Type: Boolean Default Value: "false"
fadeDuration
The duration (in milliseconds) of the fade effect when transitioning images. Type: Number Default Value: 600
fitImagesInViewport
When true, images are scaled to fit within the viewport. Type: Boolean Default Value: true
galleryVisible
Flag indicating whether the gallery is visible. Type: Boolean Default Value: true
hoverButtonIcon
The icon displayed on the hover button (e.g. "fa fa-trash fa-lg"). Type: String Default Value: "fa fa-trash fa-lg"
imageBatchSize
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
imageFadeDuration
The duration (in milliseconds) of the fade effect for image transitions. Type: Number Default Value: 600
imagesDataset
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>>
imagesFoundset
The foundset containing the images and related dataproviders for image, caption, thumbnail and imageId. Type: JSFoundset
maxImageHeight
The maximum height for images in the gallery. Type: Number
maxImageWidth
The maximum width for images in the gallery. Type: Number
positionFromTop
The vertical offset (in pixels) from the top when displaying the lightbox. Type: Number Default Value: 50
resizeDuration
The duration (in milliseconds) of the resizing animation. Type: Number Default Value: 700
responsiveHeight
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
showCaptionInGallery
When true, captions are displayed in the gallery. Type: Boolean Default Value: false
showImageNumberLabel
When true, a label showing the image number is displayed. Type: Boolean Default Value: true
wrapAround
When true, navigating past the last image wraps around to the first image. Type: Boolean Default Value: false
Events
onHoverButtonClicked(event,imageId)
Called when the hover button is clicked.
Parameters:
API
refresh()
Refreshes the component by reinitializing its configuration and loading data. This can be used to apply updates or reset the gallery state.
showLightbox(index)
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.
Types
image
Defines an image object for the Lightbox Gallery. scripting type: CustomType<servoyextra-lightboxgallery.image>
caption
Caption text for the image.
Type: tagstring
id
Unique identifier for the image.
Type: string
imageUrl
URL of the main image.
Type: string
thumbnailUrl
URL of the thumbnail image.
Type: string
Last updated
Was this helpful?