This tutorial shows you how you can display multiple images as stacked layers which can be configurated with FSI Layers.

Creating FSI Layers

First, add the FSI Layers viewer to the head of your document:

Afterwards, add the FSI Layers with some groups and layers to the part of the document you would like to display it in:

In order to ensure a correct aspect ratio of the layers while the screen is resized or when viewed with different devices, the root node or groups can be equipped with reference dimensions which ensure correct proportions.

It’s important that both refWidth and refHeight are set and a refMode is defined. In order to ensure the proportions, the dimensions of the following layers and included groups need to be set with the value rpx instead of % or px.

Example:

We concentrate on a sample without using refWidth/refHeight in this tutorial.

Afterwards you can use the JavaScript Interface to control the layers.

Here are few examples of what you can do:

Adding Groups and Layers

This adds a new group called deco to FSI Layers. Since no parent group is set, the group is added to the top level group.

A layer called wall-art is then added to the new group and alignment and width are defined.

Move Groups

We now want to have the layer deco-tree integrated in the deco group, so we move it:

This moves the layer deco-tree to the group deco. We have set the optional targetIndex so that the layer appears first in the group. If you omit this, the layer will be appended to the target group.

Dulicate Layers/Groups

We duplicate the layer deco-tree within the deco group:

This moves the layer deco-tree to the group deco. We have set the optional targetIndex so that the layer appears first in the group. If you omit this, the layer will be appended to the target group.

If you want to duplicate the layer, it would look like this. If the property withChildren is set to true like above, the content of the group is also duplicated.
The names of the duplicated layers are appended with “copy”, e.g. “deco-tree copy”.

Remove Layers/Groups

Lets remove the second group deco-new:

This removes the group and its children.

Select Layers/Groups and make them visible

We now want to select all the groups that are currently set to hidden and want to show them:

This selects all specified layers. showSelected sets all selected layers to hidden:false.

This selects all specified layers. showSelected sets all selected layers to hidden:false.

Deselect layers

You can also deselect certain layers. In the example above, only the layer table would still be selected.

With selectNone all layers are deselected.

Set properties

It is also possible to set the properties of certain layers/groups or all selected layers.
You can see all properties which can be set in the FSI Layers manual.

If a property is set individually on a layer, this will overwrite the group property.
Example: If the group opacity is set to 50%, but one layer is set to 80%, for this layer only the layer property will apply.

The first method centers the specified layers with top and left centered.

The second method would flip the selected layers with the horizontal axis.

Retrieving information

A few examples of how to retrieve information of the layers/groups:

toggleInfo toggles the info (name, dimensions, clipping state) and direction arrows of all layers and groups and is helpful for setting everything up.

getHTML returns the HTML code of all current groups and layers.

getSelectedLayerNames retrieves the names of the currently selected layers.

getProperties retrieves the properties of a specific layer.

getLayerNames returns an information object for each layer and group.

getTypeOf returns the type of a layer (“layer” or “group”) or false if it doesn’t exist.

Rendering FSI Layers/ Resetting

Render renders the current state of FSI Layers and must be called after changing properties or adding/removing layers.

You can empty the root group and reset FSI Layers by using reset.