Advanced Showcase

This tutorial shows you how to add highlighted thumbnails and scroll buttons to FSI Showcase, as well as a full screen view. This is useful if you want to showcase a product with different views.

The selected image currently displayed in the FSI Viewer instance is highlighted with a coloured border. Additional buttons allow you to conveniently scroll through the images contained in the FSI ThumbBar.

Highlighting currently active thumbnail​

If you would like highlight the currently selected image (which is shown in the zoom viewer) in the ThumbBar, you need to add the following classes to your CSS:

fsi-thumbbar div.fsi-thumbbar-container .fsi-thumbbar-thumbnail img {
  border: 1px solid transparent;
}
fsi-thumbbar
  div.fsi-thumbbar-container
  .fsi-thumbbar-thumbnail.fsi-selected-thumb
  img {
  border-color: #355d5d;
}

fsi-thumbbar div.fsi-thumbbar-container .fsi-thumbbar-thumbnail img lets you create a border around all thumbnail images, a step which is required in order to use the next class which sets the actual highlight – fsi-thumbbar div.fsi-thumbbar-container .fsi-thumbbar-thumbnail.fsi-selected-thumb img sets a border around the active thumbnail selection.

Adding Control Buttons​

If you want to add control buttons to the FSI ThumbBar instance (e.g. like in this example to scroll through the available images), you can do this in two ways. Either by using the registerButton API method or by using the cmdButtonSelector parameter and corresponding HTML attributes. We will focus on the second way in this tutorial. You can read more about customisation in the section in the FSI ThumbBar Manual.

To place buttons around the FSI ThumbBar element, we create a div with the class fsi-showcase-buttons between the fsi-viewer and the fsi-thumbbar element:

    <fsi-viewer
    class="fsi-10-viewer"
      id="FSI_yBX8HC62VCiF"
      width="100%"
      height="100%"
      cfg="showcase_presets/showcase_flat.xml"
      debug="true"
      skin="white"
      plugins="Resize, fullscreen"
      fullscreenelement="Container_FSI_yBX8HC62VCiF">
      <noscript>
        <img
        alt=""
        src="http://localhost/fsi/server?type=image&source=images/samples/Shoe/View2/sneaker-both-1.jpg"
        width="286" />
      </noscript>
    </fsi-viewer>
    <div class="fsi-showcase-buttons">
      <div class="fsi-showcase-buttons-inner" id="myThumbBarControls">
        <input class="prev" type="button" x-fsi-cmd="previousImage" />
        <input class="next" type="button" x-fsi-cmd="nextImage" />
      </div>
    </div>
    <fsi-thumbbar
      class="fsi-10-thumbs"
      viewerSelector="FSI_yBX8HC62VCiF"
         width="100%"
    height="100%"
    dir="images/samples/showcase/tutorial"
    vertical="false"
    elementWidth="160px"
    elementSpacing="4px"
    alignment="0.5"
    paddingTop="0"
    scrollbar="false"
    paddingBottom="4"
      cmdButtonSelector="#myThumbBarControls > input"></fsi-thumbbar>
  </div>

The inner div with the class fsi-showcase-buttons-inner receives the ID myThumbBarControls. This ID needs to be referred to in the tag in the following way:

cmdButtonSelector="#myThumbBarControls > input"

The input elements need to be provided with the corresponding FSI commands in order to function properly. In this case, we have added

x-fsi-cmd="previousImage"

to the left button and

x-fsi-cmd="nextImage"

to the right button.

In order to ensure that both FSI Viewer and FSI ThumbBar are shown in the Fullscreen, we have created a div with the ID Container_FSI_yBX8HC62VCiF which contains all elements. You need to refer to this specific class in the corresponding fullscreenelement parameter used in the FSI Viewer tag:

fullscreenelement="Container_FSI_yBX8HC62VCiF"

For the sake of completion, please see below for the CSS classes used in the example:

.fsi-showcase-buttons {
  width: 100%;
  height: 160px;
  bottom: 0;
  position: absolute;
}

@media screen and (min-width: 800px) {
  .fsi-fullscreen-element .fsi-showcase-buttons {
    display: none;
  }
}

.fsi-showcase-buttons-inner {
  width: 100%;
  height: 160px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 784px;
}

.prev {
  margin-right: 5px;
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translate(-100%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 10%;
  background-image: url(http://localhost/fsi/static/assets/icons/icon-arrow-left.svg) !important;
  background-repeat: no-repeat;
  background-size: contain !important;
  background-position: center center;
}

.next {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translate(100%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 10%;
  background-image: url(http://localhost/fsi/static/assets/icons/icon-arrow-right.svg) !important;
  background-repeat: no-repeat;
  background-size: contain !important;
  background-position: center center;
}

input[type='button'] {
  background: #355d5d;
  color: #fff;
  padding: 5px;
  border: 0px;
}

fsi-thumbbar.fsi-10-thumbs {
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 160px;
}

fsi-viewer.fsi-10-viewer {
  flex: 1 1 100%;
}

div.fsi-showcase-10 {
  width: 500px;
  height: 500px;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}