Skip to main content

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.



CustomClassSTRING<>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
TemplateLIST<Template1The widget template to use for this widget
AlternateTextSTRING(localized)<Used as a title for the image preview
SourceURLIMAGELINK<Media entity select, URL to an image or base64. Only used when Data infotable is empty
FallbackImageIMAGELINK<Image to show if the source is broken or missing
ScalingLISTContainHow the image will scale within its container
DataInfotable<List of images to show as slideshow.
SourceUrlFieldLISTThe name of the data field corresponding to the image source url.
NameFieldLISTThe name of the data field corresponding to the image name.
AlternateTextFieldLISTThe name of the data field corresponding to the image alternate text.
AllowPreviewBOOLEANTRUEAllows the user to preview the image from SourceURL. Preview is always true for images coming from Data
PreviewButtonTextSTRING(localized)<PreviewPreview button text
PreviewIconUriSTRING<material-outlined:visibilityURI 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
ShowImageControlsBOOLEANTRUEShow a list of control buttons to help the user mirror/flip/rotate/zoom on the previewed image
ShowCountInPreviewBOOLEANTRUEShows the current image number and number of images in the image preview. This only applies for the images from the Data infotable
ShowTilesInPreviewBOOLEANTRUEShows small thumbnails of images in preview from the Data infotable
ShowTitleBOOLEANTRUEIf 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
ClickOutsideToCloseBOOLEANTRUEClose the modal by clicking outside of the image, on the modal overlay
ShowCountLISTDon't showShow counter on image
TooltipSTRING(localized)<Optional tooltip used to display additional information. This tooltip can be styled globally from GlobalStyles.
TooltipTypeLIST<TextThe widget tooltip type


OnLoadEVENT>Triggers after the image was loaded