# Lightbox Gallery (part of package '[Servoy Extra Components](/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components.md)')\ Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\ Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md) 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](https://docs.servoy.com/guides/develop/application-design/ui-components). ## Properties ### albumLabel The label format for the album (e.g. "image %1 of %2"). Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "image %1 of %2" *** ### buttonStyleClass CSS style classes applied to the button. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) *** ### buttonText The text displayed on the button associated with the gallery. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) *** ### enabled Flag indicating whether the component is enabled for user interaction. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: "false" *** ### fadeDuration The duration (in milliseconds) of the fade effect when transitioning images. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 600 *** ### fitImagesInViewport When true, images are scaled to fit within the viewport. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true *** ### galleryVisible Flag indicating whether the gallery is visible. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true *** ### hoverButtonIcon The icon displayed on the hover button (e.g. "fa fa-trash fa-lg"). Type: [String](/reference/servoycore/dev-api/js-lib/string.md) 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](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 5 *** ### imageFadeDuration The duration (in milliseconds) of the fade effect for image transitions. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) 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\>](#image) *** ### imagesFoundset The foundset containing the images and related dataproviders for image, caption, thumbnail and imageId. Type: [JSFoundset](/reference/servoycore/dev-api/database-manager/jsfoundset.md) *** ### maxImageHeight The maximum height for images in the gallery. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) *** ### maxImageWidth The maximum width for images in the gallery. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) *** ### positionFromTop The vertical offset (in pixels) from the top when displaying the lightbox. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 50 *** ### resizeDuration The duration (in milliseconds) of the resizing animation. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) 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](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 300 *** ### showCaptionInGallery When true, captions are displayed in the gallery. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false *** ### showImageNumberLabel When true, a label showing the image number is displayed. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true *** ### wrapAround When true, navigating past the last image wraps around to the first image. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false *** ## Events ### onHoverButtonClicked(event,imageId) Called when the hover button is clicked. **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the click. > * {[String](/reference/servoycore/dev-api/js-lib/string.md)} 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](/reference/servoycore/dev-api/js-lib/number.md)} \[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\ * caption * Caption text for the image. * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) * id * Unique identifier for the image. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * imageUrl * URL of the main image. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) * thumbnailUrl * URL of the thumbnail image. * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md) *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.servoy.com/reference/servoyextensions/ui-components/media/lightbox-gallery.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.