Skip to main content

Multiple spins (FSI Viewer & ThumbBar)

This is useful if you want to show some details of a product in a point of interest style, or if you want to show several related photos or spins in one instance.

This tutorial will show you how to do this easily with FSI Showcase.

This tutorial uses an XML configuration file, which is listed here for completeness and can be found in the tutorial resources on GitHub:

<fsi_parameter>
<Plugins>
    <Plugin src="MouseModes"/>
    <Plugin src="ZoomMeter"/>
    <PLUGIN src="Showcase">
        <Align value="right"/>
        <Layout value="outside"/>
        <InitialSize value="1 items"/>
        <DragBar value="hidden"/>
        <LabelTextSize value="10"/>
        <ImageWidth value="170"/>
        <ImageHeight value="106"/>
        <ImageBorderWidth value="0"/>
    </PLUGIN>
    <PLUGIN src="largetooltips">
        <TextColor value="000000"/>
        <BackgroundColor value="F9F7E2"/>
        <BackgroundAlpha value="95"/>
        <HighlightColor value="F9F7E2"/>
        <ShadowColor value="FBD71D"/>
        <LineWidth value="1"/>
        <Delay value="0"/>
        <CornerRadius value="0"/>
    </PLUGIN>
</Plugins>
<Options>
    <NavWidth value="100"/>
    <NavMaskAlpha value="20"/>
    <NavMaskColor value="ffffff"/>
    <MenuAlign value="BL"/>
    <ScenePreload value="true"/>
</Options>
<!--  3D Images to display below  -->
<Images>
    <Image label="360° View">
        <images3d prefix="/images/samples/notebook/img00" suffix=".png" from="72" to="95"/>
        <Options>
            <InitialAction value="NextScene"/>
            <InitialActionDelay value="1"/>
            <InitialActionPersistent value="true"/>
        </Options>
    </Image>
    <Image label="Premium Touchpad">
        <images3d prefix="/images/samples/notebook/img00" suffix=".png" from="72" to="95"/>
        <Options>
            <InitialView value="1,1,0.360377,0.541887,0.644795,0.751322,0"/>
        </Options>
    </Image>
    <Image>
        <images3d prefix="/images/samples/notebook/img00" suffix=".png" from="72" to="95"/>
        <Options>
            <thumbLabel>
                USB, Mini VGA
                <br/>
                and Slim Kensington case-lock
            </thumbLabel>
            <InitialView value="1,7,0.480618,0.693618,0.707433,0.860636,0"/>
        </Options>
    </Image>
    <Image>
        <images3d prefix="/images/samples/notebook/img00" suffix=".png" from="72" to="95"/>
        <Options>
            <thumbLabel>
                HDMI, DC-IN, Headphones
                <br/>
                and Mini-Ethernet
            </thumbLabel>
            <InitialView value="1,19,0.317188,0.70026,0.50816,0.840885,0"/>
        </Options>
    </Image>
    <Image label="Webcam (720p)">
        <images3d prefix="/images/samples/notebook/img00" suffix=".png" from="72" to="95"/>
        <Options>
            <InitialView value="1,1,0.318998,0.11529,0.678388,0.379931,0"/>
        </Options>
    </Image>
</Images>
</fsi_parameter>

The Options node allows you to set all the relevant FSI parameters.

The different spins (or images) appear under the Images node, while each thumbnail is then separated by a node called Image.

If you want to use a single image for a thumbnail instead of a spin, you can use this:

<Image>
  <src value="/images/samples/notebook/img0072.png" />
</Image>

images3d contains the range of images used for the spin.

In the options node you can set the label to be used for the thumbnail with thumblabel.

If you want to set a particular viewpoint for the spin, you can do this with initialView. Read more about this in the manual.

Note:

The old FSI Showcase Flash configuration files will still work with FSI Showcase JS. The XML file above shows the new simplified way to address image areas. You can read more about this in the FSI Showcase Configuration chapter of the online manual.