This tutorial shows you how to add highlighted thumbnails and side scroll buttons to FSI Showcase plus a fullscreen view. This is helpful if you want to showcase e.g. a product with different views. The selected image, which is currently shown in the FSI Viewer instance, is highlighted with a colored border. Complementary 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 lets you to 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 customization in the section in the FSI ThumbBar Manual.
In order to set 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:
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 corrsponding 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: