Documentation
Zoom Image
Description
The Zoom Image module enables displaying two versions of an image. To display a full-screen image, click the area in the bottom-right corner of the module.
Properties
The list starts with the common properties. Learn more about them by visiting the Modules description section. The other available properties are described below.
| Property name | Description |
|---|---|
| Full Screen image | This property enables inserting a full-screen image version into the module. |
| Page image | This property enables inserting a page image version into the module. |
| Alternative text | This text will be added to the module's HTML tag. It will be read by the Text To Speech module (if used) after the user performs a certain action. |
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). |
| Speech texts | Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language. |
| Printable | Allows to choose if the module should be included in the printout. |
These properties allow online resources. Find out more ยป
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | ... | Hides the module if it is visible. |
| show | ... | Shows the module if it is hidden. |
CSS classes
| Class name | Description |
|---|---|
| .icon | Indicates the active area in the bottom-right corner. |
| .small | Indicates the page image version. |
| .zoom-image-wraper | Indicates the wrapper for the full-screen image version. |
| .big | Indicates the full-screen image version. |
| .ui-dialog | Indicates the look of the dialog box. |
| .ui-dialog-titlebar | Indicates the look of the titlebar. |
| ui-dialog-title-dialog | Indicates the look of the title. |
| .ui-dialog-titlebar-close | Indicates the look of the close button. |
| .ui-dialog-content | Indicates the look of the description container. |
Demo presentation
Demo presentation contains examples of how to use the Zoom Image module.