Image Gallery Widget
The IQNOX Image Gallery is a widget that can be used to either display an image or an image gallery. For example, when navigating to an asset page, you could display an image, and when clicking on that image, the user could see the image expanded in a preview modal, or see all the existing photos of that asset, including manuals, etc.
Image preview supports zoom, mirror, flip and rotate actions, and it also allows the user to navigate through images using the arrow keys, the modal buttons or the Esc to close the modal. When the image is zoomed, the user can also drag the image, to change its position.
Whether the widget is a normal image with preview or an image gallery depends on the Data property. If there are any images in the Data infotable, when clicking on the widget, the preview modal will display the images from the infotable. If the infotable does not exist or is empty, the preview modal will display the image in the SourceURL.
Usage
Properties
| Property | Type | Binding | Default | Description |
|---|---|---|---|---|
| CustomClass | STRING | <> | Enables you to define an html class to the top div of the widget and on the modal. Multiple classes can be entered, separated by space | |
| Template | LIST | < | Template1 | The widget template to use for this widget |
| AlternateText | STRING(localized) | < | Used as a title for the image preview | |
| SourceURL | IMAGELINK | < | Media entity select, URL to an image or base64. Only used when Data infotable is empty | |
| FallbackImage | IMAGELINK | < | Image to show if the source is broken or missing | |
| Scaling | LIST | Contain | How the image will scale within its container | |
| Data | Infotable | < | List of images to show as slideshow. | |
| SourceUrlField | LIST | The name of the data field corresponding to the image source url. | ||
| NameField | LIST | The name of the data field corresponding to the image name. | ||
| AlternateTextField | LIST | The name of the data field corresponding to the image alternate text. | ||
| AllowPreview | BOOLEAN | TRUE | Allows the user to preview the image from SourceURL. Preview is always true for images coming from Data | |
| PreviewButtonText | STRING(localized) | < | Preview | Preview button text |
| PreviewIconUri | STRING | < | material-outlined:visibility | URI describing the icon that's going to be used in the preview button. Either a HTTP link or a reference to an icon in an icon font can be used |
| ShowImageControls | BOOLEAN | TRUE | Show a list of control buttons to help the user mirror/flip/rotate/zoom on the previewed image | |
| ShowCountInPreview | BOOLEAN | TRUE | Shows the current image number and number of images in the image preview. This only applies for the images from the Data infotable | |
| ShowTilesInPreview | BOOLEAN | TRUE | Shows small thumbnails of images in preview from the Data infotable | |
| ShowTitle | BOOLEAN | TRUE | If the images come from Data, it will show the NameField field in the image preview, using the AlternateTextField field as fallback. If Data is empty it will show the AlternateText widget property | |
| ClickOutsideToClose | BOOLEAN | TRUE | Close the modal by clicking outside of the image, on the modal overlay | |
| ShowCount | LIST | Don't show | Show counter on image | |
| Tooltip | STRING(localized) | < | Optional tooltip used to display additional information. This tooltip can be styled globally from GlobalStyles. | |
| TooltipType | LIST | < | Text | The widget tooltip type |
Events
| Property | Type | Binding | Description |
|---|---|---|---|
| OnLoad | EVENT | > | Triggers after the image was loaded |