Documentation
Layered Image
Description
The Layered Image addon 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 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 "Show at start" property. With the second property set to 1, a layer will be visible at Addon start |
| Image size | List of possible image size adjustments to Addon size. Choice is from: Original (no changes), 'Keep aspect ratio' and 'Stretched' |
| Animated gif refresh | If selected, animated gifs will always be refreshed after page loading |
Supported commands
| Command name | Params | Description |
|---|---|---|
| showLayer | layerNumber | Show layer with given number |
| hideLayer | layerNumber | Hide layer with given number |
| toggleLayer | layerNumber | Toggle (hide if visible and show if hidden) layer with given number |
| show | --- | Shows the module |
| hide | --- | Hides the module |
Layer numbers are counted from 1 to n!
Advanced Connector integration
Each command supported by the Layered Image addon can be used in the Advanced Connector addon scripts. The below example shows how to react on 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 layer (including base image). Do not change background properties for this element! |
| layeredimage-loading | Loading image showed while loading resources. Image is placed in slides center. Default width and hight are 50px. Do not change/set position attributes for this element! |
Addon accepts all CSS selectors and modificators, e.g. if user would like to specify Addon appearance for on mouse hover, 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 red border on mouse hover over Addon wrapper element.
Demo presentation
Demo presentation contains examples of how to use, configure and style Addon.