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, BMP. Vector formats are not supported.

Properties

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.