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:

  • {JSEvent} event The event object associated with the click.

  • {String} imageId The identifier of the image related to the click.


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

  • 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?