The lightbox container is displayed in the middle of the screen.

The image is displayed in its original size unless the original image size is bigger than the size of the screen. In this case, the image is resized proportionally in order to be fully visible and fit on the screen.

On a mobile device, flipping the device to landscape mode will flip the lightbox. The image will then be adjusted to fit the new dimensions.

The lightbox contains the following components:

1. Lightbox container: This is the main container that holds all other components.
2. Image: This component is an embedded image control that displays the image file with the maximum available size. The size of the image should not exceed the original size and it should fit within the screen.
3. Image title: This component is mandatory and is used to describe the object to which the image is attached.
4. Image subtitle: This component is optional and is used to give additional information about the object.
5. Close button: This is a mandatory component and is used to close the lightbox container.

Basic Interactions

The lightbox control is attached to the press event of the image control. To trigger the lightbox, the user should click an image. Every image with an attached lightbox control is indicated with a zoom icon on the bottom right.

When the lightbox control is triggered, the lightbox overlays the page content and the rest of the screen is dimmed out.

If it takes more than one second to load the original image, a busy indicator is shown inside the lightbox container.

The user can close the lightbox by clicking the Close button or by clicking outside of the lightbox container.

Error Handling

An illustrated message is displayed inside the lightbox when:

• The original file is missing or the connection to the server is lost.
• The image takes more than 10 seconds to load due to a server error or the size of the image.