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 place holder 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>


Please note:

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 laggy.


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;
}