Skip to main content




Applies only to Traditional Web Apps

Light Box Image

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • We’ve been working on this article. Please let us know how useful this new version is by voting.

    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 Light Box Image UI Pattern

    1. In Service Studio, in the Toolbox, search for Light Box Image.

      The Light Box 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.

    2. From the Toolbox, drag the Light Box Image widget into the Main Content area of your application's screen.

    3. From the Toolbox, drag the Image widget into the Light Box Image widget. This is a thumbnail image.

      The Select Image pop-up is displayed.

    4. Select or import the image you want to display. In this example, we use the sample OutSystems UI images.

      Note: In this example, the image property Type is set to Static. You can also choose External URL or Database.

    5. From the Widget tree, select the Light Box Image widget.

    6. On the Properties tab, set the relevant Light Box Image properties, for example, the title of the image that is displayed, the group the image belongs to, and the size that the image will display in full screen mode.

    7. Repeat steps 2-6 for each of the images you want in your Light Box Pattern.

    After following these steps and publishing the module, you can test the pattern in your app.


    Property Description
    Title (Text): Optional Image title that is displayed when previewing the image in ful screen mode.


    • "Image 1" - Displays Image 1 as the image title.
    Group (Text): Optional Name of the group of images. Similar to the concept of a picture album. You can navigate through pictures with the same group name when viewing them in full screen mode.


    • Gallery 1 - Adds this image to the Gallery 1 group
    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.


    • 2 - A thumbnail with 100x100, and zoom 2 opens with 200x200.
    • 0.5 - A thumbnail with 500x500, and zoom 0.5 opens with 250x250.
    ExtendedClass (Text): Optional Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.


    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?