This tutorial shows you how to create a bookmark thumbnail bar with FSI ThumbBar. When used in FSI Showcase (FSI ThumbBar in combination with FSI Viewer), each time the view or images changes, a new image will be added to the vertical bookmark thumbnail bar. With this, the customer can easily track all the products he has viewed, which is helpful if you are presenting a large amount of images. The bookmarks can easily be deleted by pressing the delete key.


This is the HTML Code used in the sample:

Copy to Clipboard

We need to create two thumbbars, the one below the viewer (id=”elThumbBarHorz”) is the usual FSI ThumbBar which shows the objects and the vertical thumbbar (id=”elThumbBarVert”) is needed for displaying the bookmark thumbnails.

The vertical thumbbar will be empty at start, hence the dir parameter is not set.

The div around the viewer and thumbbars is defined with the id=”myFullScreenElement”, in order to ensure that all three parts are displayed in FullScreen mode. For this, the parameter fullScreenElement=”myFullScreenElement” needs to be set in the FSI Viewer tag.

JavaScript Part

This is how the script for realizing the bookmark thumbbar looks like:

Copy to Clipboard