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. | |
| ShowCount | LIST | Don't show | Show counter on image. | |
| ShowDownload | BOOLEAN | FALSE | Allows the user to download the file from the preview. | |
| ShowDelete | BOOLEAN | FALSE | Shows a delete button in the the control buttons list that will display a confirmation dialogue and trigger the OnDeleteTriggered event when confirmed. | |
| ConfirmationTitle | STRING(localized) | < | Delete File | Title displayed in the confirmation popup shown when deleting a file. |
| ConfirmationPrompt | STRING(localized) | < | Are you sure you want to delete this file? | Message displayed in the confirmation popup when deleting a file. |
| DefaultConfirmationButton | LIST | First button | Sets the position of the confirmation button in the popup: first or second. | |
| ConfirmationButton1Label | STRING(localized) | < | Delete | Text displayed on the first button in the confirmation dialog. |
| ConfirmationButton1Class | STRING | Custom CSS class used to style the first button in the confirmation popup. | ||
| ConfirmationButton2Label | STRING(localized) | < | Cancel | Text displayed on the second button in the confirmation dialog. |
| ConfirmationButton2Class | STRING | Custom CSS class used to style the second button in the confirmation popup. | ||
| ConfirmMessageIconURI | STRING | < | URI of the icon displayed in the delete confirmation message. | |
| ConfirmationIsModal | BOOLEAN | FALSE | Determines whether the delete confirmation is a popup or a modal. | |
| ClickOutsideToClose | BOOLEAN | TRUE | Close the modal by clicking outside of the file, on the modal overlay. | |
| IsOpen | BOOLEAN | > | Whether the gallery modal is currently open. | |
| IsLoading | BOOLEAN | <> | Indicates whether the modal gallery is currently in a loading state. Automatically updated when either AutomaticServiceLoadingIndicator or ShowImgSrcLoading is enabled, but can also be set manually to force the loading state.˝ | |
| AutomaticServiceLoadingIndicator | BOOLEAN | Automatically update the gallery loading state based on the status of the service bound to the Data property. | ||
| ShowImgSrcLoading | BOOLEAN | Whether to display the loading indicator while the browser resolves the main image's source in the gallery modal. When enabled, the overall IsLoading state will also be set while the image is loading. | ||
| SelectedRow | INFOTABLE | > | The currently selected file in the gallery. Empty when the modal is closed. | |
| RememberLastSelection | BOOEALN | Whether the gallery should remember the last selected file when the modal is reopened. | ||
| 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 |
| OnDeleteTriggered | EVENT | > | Triggered when the delete button is pressed |
| OnSelectionChanged | EVENT | > | Triggered when file displayed in the modal changes. |
| OnModalOpened | EVENT | > | Triggered when the gallery modal is opened. |
| OnModalClosed | EVENT | > | Triggered when the gallery modal is closed. |
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 |
Examples
Delete functionality
This example demonstrates how to implement the delete functionality in a widget.
Configuration
To enable the delete functionality, ensure that:
- The
AllowPreviewproperty is set totrue. - The
ShowDeleteproperty is set totrue.
Behavior
- When the delete button is pressed, the
OnDeleteTriggeredevent is invoked. - The file selected at the time of deletion will be available:
- In the
Selected Row(s)property of the service bound to theDataproperty, or - In the
SelectedRowproperty on the widget itself.
- The
IsLoadingproperty can be set totruevia binding, to provide feedback preemptively that theDatainfotable will change (optional). - If the
AutomaticServiceLoadingIndicatorproperty istrue, theIsLoadingproperty will automatically reset tofalseonce theDataproperty refreshes. Otherwise, you must manually resetIsLoadingtofalse.