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

  • 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

---