Skip to main content

Customization

CSS Classes​

The following CSS classes can be used to modify the appearance:

  • fsi-thumbbar - The entire Thumbbar instance.
  • div.fsi-thumbbar-shader - The shader below a zoomed image.
  • div.fsi-thumbbar-zoom-div -The div containing the zoomed image.
  • div.fsi-thumbbar-container img.placeholder - The placeholder shown when a thumbnail loads. See parameter placeHolderImage for more details.
  • fsi-thumbbar .fsi-thumbbar-container img - enables you to create a border around all thumbnail images, required for the next class - a border around the active thumbnail
  • fsi-thumbbar .fsi-thumbbar-container img.fsi-selected-thumb - sets a border around the active thumbnail selection
Example Highlighted Thumbnail:
fsi-thumbbar .fsi-thumbbar-container img{
  border:2px solid transparent;
}
fsi-thumbbar .fsi-thumbbar-container img.fsi-selected-thumb{
  border: 2px solid red;
}

Adding Control Buttons​

There are two ways to add control buttons:

  • using the registerButton(element, command) API method
  • using the cmdButtonSelector parameter and HTML attributes

The following commands are available:

  • firstImage
  • previousPage
  • previousImage
  • nextImage
  • nextPage
  • lastPage
Example:
<div id="myThumbBarControls">
  <input type="button" data-fsi-cmd="previousImage" value="previous" />
  <input type="button" data-fsi-cmd="nextImage" value="next"/>
</div>

<fsi-thumbbar
  cmdButtonSelector="#myThumbBarControls > input"
  width="800"
  height="400"
  dir="images/someFolder">
</fsi-thumbbar>
tip

You can use any HTML element, not just buttons. The CSS class fsi-pressed will be added to the DOM element, while the button is pressed.

Defining a custom presentation type​

You can create a custom presentation type in addition to the built-in types (see presentationType]). To use a custom presentation you need to set presentationType to custom and define 2 functions.

The function defined by CustomPresentationInitFunction will be called on start and on resize. The function defined by CustomPresentationFunction will be called each time the presentation needs to be drawn. You therefore need to make sure that this function takes very little time to complete, otherwise the presentation will be lagging.

Example:
<presentationType value="custom" />
<customPresentationInitFunction value="onThumbBarPresentationInit" />
<customPresentationFunction value="onThumbBarPresentationCalc" />

Plus the script:

Example:
function onThumbBarPresentationInit(oAnimation) {
// oAnimation contains information on the presentation
// You can add your own properties
// oAnimation will be passed to your custom calculation function
  console.log("init custom FSI ThumbBar presentation");
  console.dir(oAnimation);
  oAnimation.myLeftLimit = -oAnimation.totalWidth / 2 - 2 * oAnimation.nMaxThumbWidth;
  oAnimation.myRightLimit = oAnimation.totalWidth / 2 + 2 * oAnimation.nMaxThumbWidth;
  oAnimation.myZDistance = oAnimation.nPerspective / 8;
// nHorizontalFactor is 1 for horizontal thumb bars and -1 for vertical thumb bars
  oAnimation.myRotationFactor = oAnimation.nHorizontalFactor * 2;
}


function onThumbBarPresentationCalc(oAnimation, oItem) {
  var ret = 0;
  if (oItem.position > oAnimation.myLeftLimit && oItem.position < oAnimation.myRightLimit) {
    ret = 1;
// oItem.position is 0 for the centered image, negative for images left of the center
// delta is -1 for images at the left margin, 0 at center and 1 at the right margin
    var delta = oItem.position / oAnimation.totalWidth;
    var piDelta = 2 * delta * Math.PI;
    var zRel = Math.cos(piDelta);
    oItem.ry = Math.sin(piDelta) / oAnimation.myRotationFactor;

    oItem.z = zRel * oAnimation.myZDistance;
    oItem.brightness = 1 + (zRel - 1) / 6;

// set to true only, if items overlap (items will be z-sorted, which is expensive)
// oItem.bSetZIndex = true;
  }
// return 1 to indicate that item is on stage, 0 to indicate it's not visible
  return ret;
}