Skip to main content

What is FSI Layers?

Sample RepositoryView Samples

The FSI Layers web component is used to display multiple images or HTML elements as stacked layers that can be configured. This can be useful for e.g. for a product configurator.

Welcome to the Big City

Display multiple images or HTML elements as stacked layers

Usage​

Add the FSI Layers script to the head of your document:

Example:
<head>
  <script src="//yourdomain.com/fsi/viewer/applications/layers/js/fsilayers.js"></script>
</head>

Add a <fsi-layers> tag to the part of your document body where FSI Layers should be displayed. Add the groups and layers to it:

Example:
<body>
  <fsi-layers id="myLayers">
    <fsi-layers-root>
      <fsi-layer
        name="background"
        width="100%"
        height="100%"
        src="images/configurator/background.png">
      </fsi-layer>
      <fsi-layer name="html">
        <h1>Random Headline</h1>
      </fsi-layer>
      <fsi-layer-group
        name="clothing"
        width="20%"
        height="45%"
        right="0"
        top="20%">
        <fsi-layer
          name="Shorts"
          height="45%"
          bottom="0"
          left="0"
          src="images/configurator/shorts.png">
        </fsi-layer>

        <fsi-layer
          name="Shirt"
          height="60%"
          top="10"
          left="0"
          src="images/configurator/shirt.png">
        </fsi-layer>
      </fsi-layer-group>
    </fsi-layers-root>
  </fsi-layers>
</body>

You can add individual parameters to the corresponding <fsi-layer> or <fsi-layer-group> tags.

Font Sizes

Font sizes must be set with the 'em' unit to ensure correct sizing on 4K displays.