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, and the modal buttons or the Esc key 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 a 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.


The Data infotable can now contain all types of files. A ContentTypeField can exist in the Datashape that is used to inform the widget of the type of file in each row.

In the modal, the following files types have previews:

  • Videos, using a video element (everything with a ContentType of video/*)
  • Audio, using an audio element ( audio/* )
  • PDFs, using an embed (content type of application/pdf )
  • Anything else will get displayed as a text that shows the file name, description, and a download link.

If the file fails to load, the fallback image will be shown.

When data is bound to the widget, the first image that has a valid source url will be found, with a content type that is either an image or is empty. If no image is found, then the fallback image will be used.

If the ContentTypeField is not set, the widget will try to infer the file type from the URL. If not, it will default to showing an image. This is done to maintain compatibility with the existing widget added two new services, ShowGalleryModal and HideGalleryModal.

For example: We have the following URL,, the URL will get inferred as having the ContentType of application/zip, if the URL does not end with an extension, the widget will assume the content type is image/*.



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 preview when widget is used for a single image preview. This property will be overridden by the Name field from the Data infotable
SourceURLIMAGELINK<Media entity select, URL to an image or base64. If there are any rows in the Data infotable, they will override the SourceURL in the image preview
FallbackImageIMAGELINK<Image to show if the source is broken or missing
ScalingLISTContainHow the image will scale within its container
ContentTypeFieldFIELDNAMEThe name of the data field corresponding to the file alternate text.
DataInfotable<List of files to show as slideshow
SourceUrlFieldLISTThe name of the data field corresponding to the file source url.
NameFieldLISTThe name of the data field corresponding to the file name.
AlternateTextFieldLISTThe name of the data field corresponding to the file alternate text.
AllowPreviewBOOLEANTRUEAllows the user to preview the entire Data or the current SourceUrl.
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
ShowImageControlsBOOLEANTRUEList of control buttons to help the user mirror/rotate/zoom on the previewed image
ShowCountInPreviewBOOLEANTRUEShows the current file number and number of files in the modal preview. This only applies for the files from the Data infotable
ShowTilesInPreviewBOOLEANTRUEShows small thumbnails of files 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 file, on the modal overlay
ShowCountLISTDon't showShow counter on image
ShowDownloadBOOLEANFALSEAllows the user to download the file from the preview
TooltipSTRING(localized)<Optional tooltip used to display additional information. See Tooltip
TooltipAnchorSTRINGWidgetIf the tooltip should appear next to the Widget, or next to the cursor.
TooltipTypeLIST<TextThe widget tooltip type
TooltipWidthNUMBERTooltip width


OnLoadEVENT>Triggers after the image was loaded


HideGalleryModalSERVICE<Hides the gallery modal to view the files
ShowGalleryModalSERVICE<Shows the gallery modal to view the files