How to use the Demo Mode

This tutorial shows you how to can use the Demo Mode in FSI Pages, FSI Viewer and FSI Showcase. This is helpful if you want to create an (optionally animated) preview thumbnail that leads you to another page or to a FullScreen mode with a click.

Animated Demo Mode without UI, opens to another page

This is how your code would look like if you want to have an animated thumbnail without an interface which opens to another page:

FSI Pages:

• DemoUrl=”sample/brochure/” defines the link to the pages which should be opened on click.
• hideUiInDemoMode=”true” hides the menu bar in demo mode
• DemoURLTarget=”_blank” defines if the target is opened in another window
• IdleAutoTurn=”true” if set to true, the pages turn automatically

FSI Viewer:

• DemoUrl=”sample/spin/” defines the link to the pages which should be opened on click.
• hideUiInDemoMode=”true” hides the menu bar in demo mode
• DemoURLTarget=”_blank” defines if the target is opened in another window
• plugins=”Autospin” enables the Autospin for an animated preview
• autoSpin_interval=”200″ sets the time in seconds for a full rotation

Demo Mode with UI and tooltip, without animation, opens to another page

This is how your code would look like if you want to have a normal thumbnail with a menu bar which opens to another page. While hovering over the thumbnail, a tooltip is displayed.

FSI Pages:

• DemoUrl=”sample/brochure/” defines the link to the pages which should be opened on click.
• hideUiInDemoMode=”false” shows the menu bar in demo mode
• skin=”white” defines the skin which is shown
• DemoURLTarget=”_blank” defines if the target is opened in another window
• DemoToolTip=”Click to open brochure!” displays a thumbnail while hovering over the thumbnail

Demo Mode with tooltip, opens to FullScreen Mode

This is how your code would look if you want to open a FullScreen while clicking on a thumbnail. The tooltip is displayed while hovering over the thumbnail.

FSI Viewer:

• plugins=”Resize, fullscreen” enables FullScreen plugin
• DemoUrl=”enter fullscreen” enables the fullscreen mode on click
• hideUiInDemoMode=”false” displays the menu bar in demo mode
• DemoToolTip=”Click to enter FullScreen Mode!” defines the tooltip which is displayed on hover

FSI Showcase:

In order to ensure that everything is displayed correctly in FullScreen mode, a div with an ID needs to be set around the FSI Viewer and FSI ThumbBar elements. This ID is then referred to in the parameter fullscreenelement.

• plugins=”Resize, fullscreen” enables FullScreen plugin
• DemoUrl=”enter fullscreen” enables the fullscreen mode on click
• hideUiInDemoMode=”false” displays the menu bar in demo mode
• fullscreenelement=”Container_showcase_3″ ensures that FSI Viewer and FSI ThumbBar are both displayed in FullScreen. If this is not set, only FSI Viewer will be displayed when opening the FullScreen Mode
• DemoToolTip=”Click to enter FullScreen Mode!” defines the tooltip which is displayed on hover