Parameters


Parameters are added to the <fsi-thumbbar> tag. Note that you can as well use configuration files:


Example:
<body>
  
//Adding parameters directly to the tag:
<fsi-thumbbar width="100%" height="150" src="/images/foo/"
 backgroundcolor="#000" presentationtype="flat">
</fsi-thumbbar>
  
//Example with using a FSI configuration file:
<fsi-thumbbar width="100%" height="150" dir="/images/foo/" 
 cfg="sample/sample_configuration>
</fsi-thumbbar>
  
</body>


You can define individual configuration .xml files like this:


Simple Configuration File
<fsi_parameter>
  <image>
     	<path value="samples/Watch.jpg" />
  </image>
  <ThumbBar>
     	<presentationtype value="stacks" />
     	<debug value="1" />
	 	<enablezoom value="false" />
	 	<preloadcount value="8" />
  </ThumbBar>
</fsi_parameter>


If you would like to use global parameters for all FSI ThumbBar instances, the corresponding parameters can be defined in the _default.xml.


Example _default.xml:
<fsi_parameter>
	<Image>
		<ServerType value="FSI"/>
	</Image>


	<ThumbBar>
     	<presentationtype value="stacks" />
     	<debug value="1" />
	 	<enablezoom value="false" />
	 	<preloadcount value="8" />
   </ThumbBar>
...

<Options>
	<FSIBase value="config/"/>
	<Language value="english"/>
	<ScenePreload value="true"/>
</Options>

</fsi_parameter>


You can optionally modify the way FSI ThumbBar works by passing parameters to the script. You can either use an XML configuration passing the path using a "cfg" parameter or pass parameters and values as an object to the constructor:



Example:
<script type="text/javascript">
thumb = new $FSI.ThumbBar({debug:true, backgroundColor:"#ff0"});
thumb.init();
</script>



debug

Descriptiondisplays debug & status information in the javascript console.
SyntaxBoolean
Defaultfalse
ContextFSI ThumbBar

Display debug and status information in the browser's JavaScript console.



format

Descriptiondefines the format used for the viewer.
SyntaxBoolean
Defaultfalse
ContextFSI ThumbBar

Defines the format used for the viewer.
Default is auto which automatically chooses the best format depending on the browser; alternatively you can choose WEBP, JPEG, PNG or GIF.
Auto delivers the images adaptively as WEBP in supporting browsers, and switches to PNG or JPEG on unsupporting browsers.
If you set WEBP as a format, please keep in mind that certain browsers (currently Safari and Internet Explorer) do not support the format and will not show the image.
If you would like to use WEBP, the best way would be to set auto as the format.



headers

Descriptionheader parameter to use for image requests
SyntaxString
Default"cors"
ContextFSI ThumbBar

The "&headers=" parameter to use for image requests.

The default value "cors" ensures cors compatibility for cross-origin scenarios.




dir

DescriptionThe path to the source image folder on FSI Server to display.
Syntaxstring
Default""
ContextFSI ThumbBar

The path to the source image folder on FSI Server to display.



imageListLimit

Descriptionlimits the image list to a certain amount of images
SyntaxString
Default""
ContextFSI ThumbBar

Limits the image list to a certain amount of images within the directory. The parameter is used like this: "0,10" - the first value defines the starting image, the second the amount of images displayed. In this case it would start at the first image and show the first ten images. "5,5" would start the list with the fifth image and shows the fifth image plus the four images that are listed behind it.



imageListSort

Descriptionsorts the image list
SyntaxString
Default"filename"
ContextFSI ThumbBar

Sorts the image list with any valid sort item name for FSI Server. Available sort names:

  • "filename" (default)
  • "width"
  • "height"
  • "lastmodified"
  • "resolution"
  • "importstatus"


imageListSortOrder

Descriptiondefines the order of the image list sorting
SyntaxString
Default"asc"
ContextFSI ThumbBar

Defines the order of the image list sorting. Possible values: "asc" (Ascending) or "desc" (Descending).



ListFilterPositive

Descriptionfilters the image list using RegEx, includes matching images
SyntaxString
Default-
ContextFSI ThumbBar

Filters the image list to a certain amount of images within the directory using RegEx. If images match the Regular Expression, they will be included in the image list. If both ListFilterPositive and ListFilterNegative are used, ListFilterPositive is always used first. The filter will be applied before any other parameter is applied, i.e. all other parameters only apply to the already filtered list.

Example: ListFilterPositive="/\/09\d*.tif/i"




ListFilterNegative

Descriptionfilters the image list using RegEx, excludes matching images
SyntaxString
Default-
ContextFSI ThumbBar


Filters the image list to a certain amount of images within the directory using RegEx. If images match the Regular Expression, they will be excluded from the image list. If both ListFilterPositive and ListFilterNegative are used, ListFilterPositive is always used first. The filter will be applied before any other parameter is applied, i.e. all other parameters only apply to the already filtered list.


Example: ListFilterNegative="/\/09\d*.tif/i"




renderer 

DescriptionThe renderer parameter to use for image requests (e.g. jpeg).
Syntaxstring
Default""
ContextFSI ThumbBar

The renderer parameter to use for image requests (e.g. jpeg).



format 

DescriptionThe format parameter to use for image requests (e.g. png).
Syntaxstring
Default""
ContextFSI ThumbBar

The format parameter to use for image requests (e.g. png).



overlays

DescriptionThe overlays parameter to use for image requests.
Syntaxstring
Default""
ContextFSI ThumbBar

The overlays parameter to use for image requests.



quality

DescriptionJPEG quality level when retrieving JPEG images from the server.
SyntaxInteger
Default-
ContextFSI ThumbBar

The JPEG quality level when retrieving JPEG images from the server.



effects

DescriptionOptional FSI Server effects to use for all images.
SyntaxString
Default""
ContextFSI ThumbBar

Optional FSI Server effects to use for all images.

Example: effects:"Sepia()"

In contrast to all other parameters, defining the parameter "effect" adds(!) the string to the existing effects parameter.
E.g. if your configuration file contains: <effects value="blur(10)" /> and you add to your <fsi-viewer> tag effects="sepia()", the resulting effects parameter value is: blur(10),sepia().

If you want to overwite existing effects values, you can start the effects parameter with "ClearEffects()".

In the example above, if you add effects="ClearEffects(),sepia()" to your <fsi-viewer> tag, the resulting effects parameter value is "sepia()" only.


Please note:

ClearEffects() must be written exactly like this and must be at the start of the "effects" parameter value.


Please refer to your FSI Server documentation for a list of available effect parameters.



cropValues

DescriptionDefines the amount that should be cut off the image.
SyntaxString
Default""
ContextFSI ThumbBar

Defines the amount that should be cut off the image from each side.

Values can be provided as pixel (e.g. "20px") or percent (e.g. "10%") or floating point numbers (e.g. "0.25").

Use 4 values for left, top, right, bottom.

Example: 10%,0,10%,0





cropRect

DescriptionDefines a crop rectangle
SyntaxString
Default"0,0,1,1"
ContextFSI ThumbBar

Defines the amount that should be cut off the image from each side.

Values can be provided as pixel (e.g. "20px") or percent (e.g. "10%") or floating point numbers (e.g. "0.25").

Use 4 values for left, top, right, bottom.



Note

You cannot use "CropRect" AND "CropValues" parameters at a time.

If you use both, "CropRect" will be ignored.




elementWidth

DescriptionThe maximum width of images in the slideshow.
SyntaxString
Default10 (px)
ContextFSI ThumbBar

The maximum width of images in the slideshow. The value can be provided in pixels or in percent of the instance width.



minelementWidth

DescriptionThe minimum width of images in the slideshow.
SyntaxInteger
Default24
ContextFSI ThumbBar

The minimum width of images in the slideshow. The value can be provided in pixels or in percent of the instance width.




elementSpacing

DescriptionSpacing between the images in pixel.
SyntaxString
Default0.25 (%)
ContextFSI ThumbBar

Spacing between the images in pixel. The spacing needs to be either stated in pixels or in percent of the instance width.

Note: If the resulting image height limits the image dimension, there is a spacing even if you define elementSpacing with a value of "0". In this case you either need to:


a) Increase the container <div> element height

b) Decrease the value of the elementWidth parameter


minelementSpacing

DescriptionMinimum spacing between the images in pixel.
SyntaxInteger
Default0
ContextFSI ThumbBar

Minimum spacing between the images in pixel. The spacing needs to be either stated in pixels or in percent of the instance width.



autoElementSpacing

Descriptionadjusts the spacing automatically
SyntaxBoolean
Defaulttrue
ContextFSI ThumbBar

If set to "true" and all thumbnails fit into view and there is more than one thumbnail, the elementSpacing will be adjusted so that the first thumbnail is left aligned and the last thumbnail is right aligned, with even spacing between the rest of the thumbnails.



containerAlignment

Descriptionalignment of the image container
Syntaxstring
Defaultcenter
ContextFSI ThumbBar

Defines the alignment of the image container if there are less images than fitting into the element.

Only applicable to presentationType="flat" and if autoElementSpacing="false". Default is "left". You can either set "center" or "0.5" to center the image container, or set a number between 0-1 for more specific alignment.



paddingTop

DescriptionTop padding in pixel.
SyntaxInteger
Default10
ContextFSI ThumbBar

Top padding in pixel.



paddingBottom

DescriptionBottom padding in pixel.
SyntaxInteger
Default0
ContextFSI ThumbBar

Bottom padding in pixel.




autoResize

Descriptiondefines if instance is resized when the DOM element is resized
SyntaxBoolean
Defaulttrue
ContextFSI ThumbBar

Defines if the instance is resized when the DOM element is resized.



initialImage 

Descriptiondefines the image index to focus on start
SyntaxInteger
Default0
ContextFSI ThumbBar

Defines the image index to focus on start.



vertical  

Descriptiondefines if the thumb bar is displayed horizontally or vertically
SyntaxBoolean
Defaultfalse
ContextFSI ThumbBar

Defines if the thumb bar is displayed horizontally (default) or vertically.  



presentationType

DescriptionThe overall image presentation appearance.
SyntaxString
Default"flat"
ContextFSI ThumbBar

Selects the overall image presentation appearance in FSI ThumbBar. Available types:



enableZoom

DescriptionEnable or disable zooming the focused image with the built-in image zoom.
SyntaxBoolean
Defaulttrue
ContextFSI ThumbBar

Enable or disable zooming the focused image with the built-in image zoom. 

When zooming an image, FSI TumbBar adds a <div> element to the document body, holding the zoomed image.



useTouchZoom 

DescriptionUses FSI TouchZoom on thumbnail images.
SyntaxBoolean
Defaulttrue
ContextFSI ThumbBar

Uses FSI TouchZoom on thumbnail images and requires adding the FSI TouchZoom script to the document.



zoomMargin

DescriptionSets margin around the zoom div.
SyntaxInteger
Default40
ContextFSI ThumbBar

Defines the margin around the zoom div (when not using FSI Viewer).



ScrollBar

Descriptionenable or disable the scroll bar.
SyntaxBoolean
Defaulttrue
ContextFSI ThumbBar

This value enables or disables the scroll bar.


  

centerZoomedImage

Descriptionscrolls to the selected (zoomed) image
SyntaxBoolean
Defaulttrue
ContextFSI ThumbBar

Moves the currently zoomed image to the center of the bar.



Alignment 

DescriptionAlignment of the thumbnails (vertical alignment if horizontal thumb bar and vice versa).
SyntaxFloat
Default1.0
ContextFSI ThumbBar

Usually, the alignment is done via CSS.

To use CSS, please set the "Alignment" parameter to "false" and use these CSS classes:

Example:
// for horizontal alignment
fsi-thumbbar .fsi-thumbbar-container .fsi-thumbbar-thumbnail{
text-align: center;
}
// for vertical alignment
fsi-thumbbar .fsi-thumbbar-container .fsi-thumbbar-thumbnail > img{
vertical-align: top;
}


Alternatively, you can still use the alignment parameter.


Alignment of the thumbnails (vertical alignment if horizontal thumb bar and vice versa):

  • 1.0: align at bottom (or right)
  • 0.5: center images
  • 0.0: align at top (left)
  • ...or any value inbetween



endlessScrolling

Descriptiondefines if endless scroll is activated
SyntaxBoolean
Defaultfalse
ContextFSI ThumbBar

Defines if the endless scroll is activated and duplicates images if required.



preloadCount

DescriptionThe number of images to pre-load.
SyntaxInteger
Default40
ContextFSI ThumbBar

The number of images to pre-load although they are currently not visible.

Disabling preload (set value to 0) will only load images visible on stage.



autoRotateSpeed

DescriptionAuto scroll on start.
Syntax(Float) 
Default0
ContextFSI ThumbBar

Auto scroll on start; use positive or negative values to specify the direction. Auto-rotation stops as soon as the user interacts with the bar.



depthFadeout 

DescriptionDarkens images that are further away in z-direction.
SyntaxBoolean
Defaulttrue
ContextFSI ThumbBar

Darkens images that are further away in z-direction (for 3D presentation types).




zoomShaderStartOpacity 

DescriptionThe start opacity of the shader when zooming an image.
SyntaxFloat
Default0
ContextFSI ThumbBar

The start opacity (0 to 100) of the shader when zooming an image. See CSS Classes for more options like color.



zoomShaderEndOpacity 

DescriptionThe end opacity of the shader when zooming an image.
SyntaxFloat
Default0
ContextFSI ThumbBar

The end opacity (0 to 100) of the shader when zooming an image. See CSS Classes for more options like color.



autoDestroy

Descriptionautomatically destroy instances
SyntaxBoolean
Defaulttrue
ContextFSI ThumbBar

Automatically destroy instances created with the fsi-thumbbar tag upon removing the tag from the document DOM. 



viewerSelector 

Descriptionalias for viewerID
SyntaxString
Default
ContextFSI ThumbBar

Defines a selector (e.g. "#myViewer" or "fsi-viewer" or ".myClass") of an FSI Viewer instance to be used to display the selected image. You may use "auto" to use the first <fsi-viewer> tag in the document (if there is only one).


cmdButtonSelector  

Descriptiona selector to one or more DOM elements that should be used as control buttons
SyntaxString
Default
ContextFSI ThumbBar

Defines a selector to one or more DOM elements that should be used as control buttons.

The matched DOM elements need to contain the attribute "data-fsi-cmd" wth one of the following values:
firstImage, previousPage, previousImage, nextImage, nextPage, lastPage

See "Adding control buttons" for more information.


PerspectiveAlignment  

DescriptionDefines the perspective origin for 3D presentation types ("innerRing", "outerRing", "custom").
SyntaxFloat
Default1.0
ContextFSI ThumbBar

Defines the perspective origin for 3D presentation types ("innerRing", "outerRing", "custom").

  • 1.0: perspective origin at bottom (or right)

  • 0.5: perspective origin at center

  • 0.0: perspective origin at top (left)

  • ...or any other value



placeHolderImage 

DescriptionDefines the CSS Class and type of the placeholders while images are loading.
SyntaxString
Default"default"
ContextFSI ThumbBar

Defines the CSS Class and type of the placeholders while images are loading.

  • none" (CSS class: "none") - no placeholder at all

  • "blank" (CSS class: "blank") - a blank white placeholder

  • "default" (CSS class: "default") - the default placeholder with a background image

  • "custom" (CSS class: "custom") - a custom placeholder class (add the CSS class as described below)

  • [path to an image on FSI Server] (CSS class: "image") - a custom image with a pad effect (see parameter placeHolderPadEffect)

To customize the CSS for the placeholder, please use the following CSS rule:

div.fsi-thumbbar-root div.fsi-thumbbar-container img.placeholder.image

(replace ".image" with the CSS class listed above).



placeHolderPadEffect  

DescriptionDefines the pad effect to use when using a custom placeholder image.
SyntaxString
DefaultPad(CC,FFFFFF)
ContextFSI ThumbBar

Defines the pad effect to use when using a custom placeholder image (see parameter placeHolderImage).



garbageCollectionSize 

DescriptionSpecifies how many images will be kept in memory although they ar not visible anymore.
SyntaxInteger
Default-1
ContextFSI ThumbBar

Specifies how many images will be kept in memory although they ar not visible anymore.
Use -1 for auto sizing the garbage collection size.
Use 0 to disable garbage collections (all images will be kept in memory, not recommended for huge collections)

Any other positive number:
At least the specified number of images will be kept in memory.
Can be more images if required by instance size and preloadCount parameter.