Using FSI Showcase with highlighted thumbnail, scroll buttons and Fullscreen
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.
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:
Copy to Clipboard
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:
Copy to Clipboard
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
to the left button and
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:
For the sake of completion, please see below for the CSS classes used in the example:
Cookies on this website allow us to:
facilitate user navigation on our website
by enable the website to remember the country chosen by the user
by enable the live chat support
by tracking the user's navigation during website sessions to ensure safe, efficient navigation
by letting users enter information once and not have to enter it again when returning to our website
by allowing the user to stay on the same host server throughout the session
by allowing the user to stay logged on to certain parts of the website (for example to the ordering systems) while they are navigating the website
to improve our services
by obtaining anonymous statistics on website visits related to the website in question
by identifying website visitors who found the site via a digital campaign
These are cookies which are sent to the user’s computer terminal by other entities (partners, advertisers…) when you navigate certain pages of our website.
These entities have undertaken to respect the legislation regarding cookies and guarantee to implement data protection and security measures.
A user may allow, block or delete cookies installed on their computer by configuring their installed browser options