Documentation

Zoom Image

Description

The Zoom Image module enables displaying two versions of an image. To display a full-screen image, click on the area in the bottom-right corner of the module.

Note: To correctly display the SVG files in the Internet Explorer browser, it is necessary to add to <svg> tag the following parameter: viewBox="0 0 WIDTH HEIGHT".
For example: <svg width="800" height="400" viewBox="0 0 800 400" ...
You can edit SVG files in any text editor.

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 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 showing how to use the Zoom Image module.