You can use FSI Showcase to show multiple object spins in one presentation. This is helpful if you would like to present e.g. some details of a product in a point of interest style, or if you would like to show multiple cohesive photos or spins in one instance. This tutorial shows you how you can easily achieve this with FSI Showcase.
This tutorial uses a XML configuration file which is listed here for the sake of completeness:
In the Options node all relevant FSI parameters can be set.
The different spins (or images) appear under the node Images, while each thumbnail is then seperated with an node called Image.
If you want to use a single image for a thumbnail and not a spin, you can use:
images3d contains the range of images used for the spin.
In the options node the label which will be used for the thumbnail can be set with thumblabel.
If you want to set a certain viewpoint of the spin, this can be done with initialView. Read more about this in the manual.
Please Note: The old FSI Showcase Flash configuration files still work with FSI Showcase JS. The XML file above shows the new simplified way to adress image ranges. You can read more about this in the FSI Showcase Configuration chapter in the online manual.
In order to create a viewer using this configuration with a vertical side bar, the code would look like this:
In order to place the thumbnail bar on the right of the viewer, the parameter vertical needs to be set to true in the FSI ThumbBar tag. Furthermore, the div that is set around the viewer needs to include a padding that matches the width of the FSI Thumbbar instance, in this case 200px, so the padding of the div is set to padding-right:200px.
If you would like to use FullScreen, it is important to include fullScreenElement and set the parameter to the ID of the div that surrounds the FSI ThumbBar and the FSI Viewer in order to ensure that everything is included in FullScreen mode.
In this example, elementWidth sets the thumnail width to 20%. The parameter autoElementSpacing ensures an even spacing between the thumbnails. This automatically adapts if the size of the viewport changes, e.g. in FullScreen mode.