Parameter List

false
Default

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

cors
Default

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

When using a relative path the location specified by the FSI Viewer FSIBase parameter will be used, which is viewer/config/ by default.

auto
Default

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 browsers not supporting the format. If you would like to use WEBP, the best way would be to set auto as the format.

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

Defines the paths to single images used for FSI ThumbBar. Example: dir1/1.jpeg, dir1/2.jpeg, dir2/1.jpeg,...

true
Default

Prevents automatic initialisation when the instance has been attached to the DOM. Helpful e.g. when working with React.

info
Default

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.

filename
Default

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

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

asc | desc
Values

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

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"

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"

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

The overlays parameter to use for image requests.

info
Default

JPEG quality level when retrieving JPEG images from the server

Optional FSI Server effects to use for all images.

Example: effects:"Sepia()"

In contrast to all other parameters, defining the parameter effects adds(!) the string to the existing effects parameter.

E.g. if your configuration file contains:

<effects value="blur(10)" />

and you add to your ThumbBar tag effects="sepia()", the resulting effects parameter value is: blur(10),sepia().

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

In the example above, if you add effects="ClearEffects(),sepia()" to your FSI ThumbBar tag, the resulting effects parameter value is sepia() only.

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

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

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.

String or HTML code with optional templates to display below all thumbnails. Learn more about metadata in the tutorial How to add metadata to images.

###iptc.Headline### <br/>
###iptc.Caption### <br/><br/>
###iptc.Credit###

10 px
Default

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

24
Default

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

0.25 %
Default

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

0
Default

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

true
Default

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.

center
Default

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.

10
Default

Top padding in pixel.

0
Default

Bottom padding in pixel.

true
Default

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

0
Default

Defines the image index to focus on start.

false
Default

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

flat | stacks | outerRing | innerRing | custom
Values

Selects the overall image presentation appearance in FSI ThumbBar. For custom, see chapter Using custom presentation type to learn more.

true
Default

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

true
Default

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

40
Default

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

true
Default

This value enables or disables the scroll bar.

true
Default

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

1.0
Default

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

Usually, the alignment is done via CSS.

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

// 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)
• 1.0: align at bottom (or right)
• 0.5: center images
• 0.0: align at top (left)
• ...or any value in between

false
Default

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

40
Default

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.

0
Default

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.

true
Default

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

0
Default

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

0
Default

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

true
Default

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

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

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 with one of the following values: firstImage, previousPage, previousImage, nextImage, nextPage, lastPage

See "Adding control buttons" for more information.

1.0
Default

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

default
Default

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

Pad(CC,FFFFFF)
Default

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

-1
Default

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.