Configuration

Defining Image Lists

In order to use FSI Showcase, you can either use old configuration files used for FSI Showcase Flash, or create a new configuration file where all the images are defined. The basics of a general configuration can be found in the chapter Using XML Configuration files.

This is an example of how a Showcase XML Configuration file could look like:

<?xml version="1.0" encoding="UTF-8"?>
<fsi_parameter>
	<Viewer>
		<skin value="white" />
		<noNav value="true" />
 	</Viewer>


	<ThumbBar>
     	<paddingTop value="15" />
   </ThumbBar>


	<Options>
		<imageListParameterFilterPositive value="initialView, thumbLabel" />
		<Language value="english"/>
	</Options>

	<!-- Showcase Images to display below -->
	<Images>
		<Image>
			<images3d prefix="/Storage/Spin/image-" suffix=".png" from="01" to="20" />
			<Options>
				<thumbLabel value="360 View" />
			</Options>
		</Image>

		<Image label="Premium Touchpad">
			<images3d prefix="/Storage/Spin/image-" suffix=".png" from="01" to="20" />
			<Options>
				<InitialView value="1,1,0.419097,0.609245,0.580208,0.776693,0" />
				<thumbLabel value="Premium Touchpad" />
			</Options>
		</Image>

		<Image label="USB, Mini VGA and Slim Kensington case-lock ">
				<images3d prefix="/Storage/Spin/image-" suffix=".png" from="01" to="20" />
			<Options>
				<thumbLabel value="USB, Mini VGA and Slim Kensington case-lock" />
				<InitialView value="1,7,0.488666,0.625423,0.703314,0.848514,0" />
			</Options>
		</Image>

	</Images>

</fsi_parameter>

When defining the image list, you can still use the old configuration way:

<images3d prefix="/images/foo_" suffix=".jpg">
	<image src="01" />
	<image src="02" />
	[...]
	<image src="20" />
<images3d>

In order to simplify the configuration, we have now added the possibility to define a range of images rather than listing all images:

<images3d prefix="/images/samples/foo_" suffix=".jpg" from="01" to="20" />

Both definitions create a list of: <image src="/images/samples/foo_01.jpg" /> to <image src="/images/samples/foo_20.jpg" />.

Filtering Image Lists

As seen in the example XML above, you can filter the image lists for certain parameters.

Define, which parameters in a sub configuration of an image list will pass the filter.
You can define multiple parameter names seperated by commata.
E.g. "fpxSrc, thumbLabel" will ignore all parameters except "fpxSrc" and "thumbLabel".

Define, which parameters in a sub configuration of an image list will not pass the filter.
You can define multiple parameter names seperated by commata.
E.g. "fpxSrc, thumbLabel" will accept all parameters except "fpxSrc" and "thumbLabel".

Using Labels in FSI ThumbBar

Defining labels

You have two options to define labels:

1) adding the label to an <image> tag as attribute. This is the way old configuration (Flash) files used to add the label:

<images>
		<image label="foo">
			[...]
		</image>
		<image label="bar">
			[...]
		</image>
	</images>

2) adding a "thumbLabel" Parameter to your configuration. You can define this as a general parameter in the main configuration or in a sub configuration of the image list.

<options>
	 	<thumbLabel value="###thumb.fileName###" />
	 	[...]
	 </options>

This makes sense if you either want to have the same label for every thumbnail or if you want to create them dynamically (see below).

<images>
		<image>
			<options>
				<thumbLabel value="Thumbnail Name" />
				[...]
			</options>
		</image>
	</images>

Label Values

The label value will be url-decoded. Therefore e.g. "%20" will be transformed into space.

If you want to use image information inside the label, you can use space holders:

###thumb.fileName### - the file name of the image
###thumb.filePath### - the file path of the image
###thumb.index### - the numeric index of the image [0,1,2,3...]

In addition, you can use any information from an images "info" request. The available meta data depends on the image and the image info template (parameter "imageInfoTemplate").

By default the value of "imageInfoTemplate" is "info.json" and reveils the following information:

###width### - width of the source image in pixel
###height### - height of the source image in pixel
###size### - file size of the source image in byte
###src### - file path of the image
###alpha### - image contains an alpha channel ("true") or not ("false")

You can create more custom info templates, that reveal more data, like IPTC or EXIF data. The template in the label must match the name of the meta data exactly.
If the result of the info template (JSON) contains objects, please use the dot notation like in Javascript:

###general.icc###
###iptc.Date Created###
###exif.Exposure time###

Using own template values or modifying template values

You can use the "onReplaceLabelTemplate" callback to modify the template value or to set the value of a custom template name of your own.

var onReplaceLabelTemplate = function(strTemplateName, strValue, oItem, oInfo){
	// this replaces "###custom.foo###" in the label with "bar"
	if (strTemplateName === "custom.foo")	return "bar";
}

var onReplaceLabelTemplate = function(strTemplateName, strValue, oItem, oInfo){
	if (strValue === undefined) return;

	// this adds " px" to "###width###" and "###height###" in the label
	if (strTemplateName === "width" || strTemplateName === "height")	
	return strValue + " px";
}

onReplaceLabelTemplate:{a:"strTemplateName, strValue, oItem, oInfo", r:"strNewValue"}