You can use the Lightbox Image UI Pattern to open smaller thumbnail images in full screen mode. This UI pattern is often used when creating an image gallery, allowing you to navigate through each of the images and view them in more detail.
How to Use the Lightbox Image UI Pattern
In Service Studio, in the Toolbox, search for
The Lightbox Image widget is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
From the Toolbox, drag the Lightbox Image widget into the Main Content area of your application's screen.
By default, the Lightbox Image widget contains an Image placeholder. You can add as many images as required by dragging the Image widget from the Toolbox into the Lightbox Image widget.
Select the Image placeholder and on the Properties tab, from the Image drop-down, select or import the thumbnail image you want to display. In this example, we use the sample OutSystems UI Images.
Note: In this example, the image property is set to Local Image. You can also choose External URL or Binary Data.
Repeat step 3 for each of the images.
From the Widget Tree, select the Lightbox Image widget, and on the Properties tab, set the relevant (optional) properties.
|Title (Text): Optional||Image title that is displayed when previewing the image in full screen mode.
|Group (Text): Optional||Name of the group of images. Similar to the concept of a picture album, images in the same group are displayed in a gallery. You can navigate through pictures with the same group name when viewing them in full screen mode.
|ImageURL (Text): Optional||URL for the image you want to show in full screen mode. If empty, a zoomed version of the thumbnail is displayed. Use this if you want to load a lower quality image as a thumbnail and display a higher quality version in full screen mode.|
|ImageZoom (Decimal): Optional||Defines the size of the image that opens in full screen mode (based on the thumbnail size).
To avoid rendering problems, try to use images with the same ratio.
|ExtendedClass (Text): Optional||Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.
Compatibility with other patterns
The Lightbox Image UI pattern can be used only with images.
Watch how the Product Overview sample uses the Lightbox Image UI Pattern: