Documentation
Layered Image
Description
The Layered Image module allows users to embed multilayered images into presentations. Each layer is represented by an image with transparent elements (alpha channel).
Note: Layered Image supports the following graphic formats: JPG, PNG, and BMP. Vector formats are not supported.
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 |
|---|---|
| Base image | An image which serves as the lowest layer (on which all layers are placed).
This property allows online resources. Find out more ยป |
| Layers | Each layer consists of an image with transparent elements (Image) and the "Show at start" property. With the second property set to 1, a layer will be visible at the start. |
| Image size | List of possible image size adjustments to the module's size. Choose between: 'Original' (no changes), 'Keep aspect ratio' and 'Stretched'. |
| Animated gif refresh | If selected, animated GIFs will always be refreshed after loading the page. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| showLayer | layerNumber | Show layer with the given number. |
| hideLayer | layerNumber | Hide layer with the given number. |
| toggleLayer | layerNumber | Toggle (hide if visible and show if hidden) layer with the given number. |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
Layer numbers are counted from 1 to n!
Advanced Connector integration
Each command supported by the Layered Image module can be used in the Advanced Connector module's scripts. The below example shows how to react on the Text module gap content changes (i.e. throughout putting in it elements from Source List) and change toggle visibility of two of the layers.
EVENTSTART
Source:Text2
Item:1
Value:ON
SCRIPTSTART
var layeredImage = presenter.playerController.getModule('Layered_Image1');
layeredImage.showLayer(2);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Item:1
Value:OFF
SCRIPTSTART
var layeredImage = presenter.playerController.getModule('Layered_Image1');
layeredImage.hideLayer(2);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Item:2
Value:ON
SCRIPTSTART
var layeredImage = presenter.playerController.getModule('Layered_Image1');
layeredImage.showLayer(3);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Item:2
Value:OFF
SCRIPTSTART
var layeredImage = presenter.playerController.getModule('Layered_Image1');
layeredImage.hideLayer(3);
SCRIPTEND
EVENTEND
CSS classes
| Class name | Description |
|---|---|
| layeredimage-wrapper | DIV surrounding all image elements. Base image and layers are direct children of this element. |
| layeredimage-image | An image which serves as a layer (including base image). Do not change background properties for this element! |
| layeredimage-loading | Loading image showed while loading resources. The image is placed in the slide's center. The default width and height are 50px. Do not change/set position attributes for this element! |
The Layered Image module accepts all CSS selectors and modifiers, e.g., if the user would like to specify the module's appearance on mouse hover, the CSS declaration could look like this:
.Layered_Image_custom {}
.Layered_Image_custom .layeredimage-wrapper {
border: 2px solid black;
}
.Layered_Image_custom .layeredimage-wrapper:hover {
border: 2px solid red;
}
This declaration will result in a red border on mouse hover over the module wrapper element.
Demo presentation
Demo presentation contains examples of how to use the Layered Image module.