Skip to main content

Bookmark Thumbnails with FSI ThumbBar

This tutorial will show you how to create a bookmark thumbnail bar using FSI ThumbBar. When used in FSI Showcase (FSI ThumbBar in combination with FSI Viewer), each time the view or images change, a new image is added to the vertical bookmark thumbnail bar.

This makes it easy for the customer to keep track of all the products they have viewed, which is useful when presenting a large number of images. Bookmarks can be easily deleted by pressing the delete button.

Bookmarks in Thumbbar

HTML Code​

This is the HTML Code used in the sample, you can find the complete file in the GitHub tutorial resources:

<body id="myFullScreenElement">
  <div class="headline">
    <h3>Adding images to ThumbBar at runtime</h3>
    Select images and zoom and pan.<br />
    Each time the view or images changes, a new image will be added to the
    vertical thumbnail bar.<br />
    Press "delete" to remove all bookmark images.<br />
  </div>
  <div class="bookmark">
    <p>Your Bookmarks</p>
    <fsi-thumbbar
      id="elThumbBarVert"
      vertical="true"
      elementWidth="115px"
      paddingTop="0"
      paddingBottom="0"
      alignment="center"
      autoElementSpacing="0"
      width="120px"
      height="90%"
      placeHolderImage="none"></fsi-thumbbar>
  </div>
  <fsi-viewer
    width="90%"
    height="70%"
    id="myBookMarkViewer"
    skin="white"
    plugins="fullscreen"
    fullScreenElement="myFullScreenElement"
    onViewChanged="onFSIViewChanged">
  </fsi-viewer>
  <fsi-thumbbar
    id="elThumbBarHorz"
    viewerSelector="#myBookMarkViewer"
    dir="/images/samples/showcase/handbags/"
    elementWidth="10%"
    paddingTop="4"
    paddingBottom="4"
    autoElementSpacing="true"
    Alignment="1"
    height="15%"
    width="90%"
    placeHolderImage="none"></fsi-thumbbar>
</body>

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

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

The div around the viewer and thumb bars 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 thumb bar looks like - you can find the complete file in the tutorial resources on GitHub.

// add key handler to remove all bookmarks
$FSI.addEvent(window, 'keyup', myKeyHandlerForThumbBar);

function myKeyHandlerForThumbBar(evt) {
  if (evt.keyCode === 46) {
    var elBar = document.getElementById('elThumbBarVert');
    elBar.removeAllImages();
  }
}

var nBookmarkCount = 1;
function onFSIViewChanged() {
  var elBar = document.getElementById('elThumbBarVert');

  // get the current image url from the FSI Viewer instance
  var url = this.getVisibleImageURL();

  var sourceImagePath = $FSI.utils.getParameterValueFromURL(url, 'source');
  var imageEffects = $FSI.utils.getParameterValueFromURL(url, 'effects');

  if (sourceImagePath) {
    // limit to max 50 bookmark thumbnails
    if (elBar.getImageCount() >= 50) elBar.removeImages(0);

    // we could just add the "sourceImagePath" as string to FSI ThumbBar,
    // but we want to add a label and the image section currently viewed as well
    var oImage = {
      src: sourceImagePath,
      parameters: {
        thumbLabel: 'bookmark #' + nBookmarkCount++,
        initialView: '1,1,' + this.getVisibleImageRect().toString(),
      },
    };

    // add the image effects as seen in the FSI Viewer instance (if any)
    if (imageEffects) oImage.parameters.effects = imageEffects;

    // add the image to the thumbnail bar
    var ret = elBar.addImages([oImage]);

    // scroll the vertical thumb bar to the image we just added
    elBar.focusImage(ret[0].nIndex);
  }
}