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
ContentTypeofvideo/*) - 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,
http://example.com/myfile.zip, the URL will get inferred as having theContentTypeofapplication/zip, if the URL does not end with anextension, the widget will assume the content type isimage/*.
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 preview when widget is used for a single image preview. This property will be overridden by the Name field from the Data infotable | |
| SourceURL | IMAGELINK | < | 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 | |
| FallbackImage | IMAGELINK | < | Image to show if the source is broken or missing | |
| Scaling | LIST | Contain | How the image will scale within its container | |
| ContentTypeField | FIELDNAME | The name of the data field corresponding to the file alternate text. | ||
| Data | Infotable | < | List of files to show as slideshow | |
| SourceUrlField | LIST | The name of the data field corresponding to the file source url. | ||
| NameField | LIST | The name of the data field corresponding to the file name. | ||
| AlternateTextField | LIST | The name of the data field corresponding to the file alternate text. | ||
| AllowPreview | BOOLEAN | TRUE | Allows the user to preview the entire Data or the current SourceUrl. | |
| 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 | List of control buttons to help the user mirror/rotate/zoom on the previewed image | |
| ShowCountInPreview | BOOLEAN | TRUE | Shows the current file number and number of files in the modal preview. This only applies for the files from the Data infotable | |
| ShowTilesInPreview | BOOLEAN | TRUE | Shows small thumbnails of files 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 file, on the modal overlay | |
| ShowCount | LIST | Don't show | Show counter on image | |
| ShowDownload | BOOLEAN | FALSE | Allows the user to download the file from the preview | |
| Tooltip | STRING(localized) | < | Optional tooltip used to display additional information. See Tooltip | |
| TooltipAnchor | STRING | Widget | If the tooltip should appear next to the Widget, or next to the cursor. | |
| TooltipType | LIST | < | Text | The widget tooltip type |
| TooltipWidth | NUMBER | Tooltip width |
Events
| Property | Type | Binding | Description |
|---|---|---|---|
| OnLoad | EVENT | > | Triggers after the image was loaded |
Services
| Property | Type | Binding | Description |
|---|---|---|---|
| HideGalleryModal | SERVICE | < | Hides the gallery modal to view the files |
| ShowGalleryModal | SERVICE | < | Shows the gallery modal to view the files |