Skip to main content

Demo Mode

This is useful if you want to create a preview thumbnail (optionally animated) that takes you to another page or full screen with a single click.

Animated, without UI, new page​

FSI Pages​

This is what it would look like if you wanted to have an animated thumbnail with no interface that opens to another page:

<fsi-pages
  width="400"
  height="300"
  dir="/images/samples/pages/product"
  cfg="pages_presets/catalog_links.xml"
  pageLayout="flip"
  hideUiInDemoMode="true"
  demourl="sample/brochure/"
  demoURLTarget="_blank"
  idleAutoTurn="true">
</fsi-pages>
  • demourl="sample/brochure/" sets the link to the pages to open on click.
  • hideUiInDemoMode="true" hides the menu bar in demo mode
  • demoURLTarget="_blank" specifies whether the target will be opened in another window.
  • idleAutoTurn="true" if set to true, the pages will turn automatically.

FSI Viewer​


<fsi-viewer
  width="400"
  height="400"
  skin="white"
  dir="/images/samples/cruiser/"
  hideuiindemomode="true"
  plugins="Autospin"
  demourl="sample/spin/"
  demoURLTarget="_blank"
  autoSpin_interval="200">
</fsi-viewer>
  • demourl="sample/spin/" defines the link to the pages to be opened on click.
  • hideUiInDemoMode="true" hides the menu bar in demo mode.
  • demoURLTarget="_blank" defines if the target will be opened in another window.
  • plugins="Autospin" enables Autospin for an animated preview.
  • autoSpin_interval="200" sets the time in seconds for a full spin.

With UI and tooltip, no animation, new page​

This is what your code would look like if you wanted to have a normal thumbnail with a menu bar that opens to another page. When the mouse is over the thumbnail, a tooltip is displayed.

FSI Pages​


<fsi-pages
  width="400"
  height="300"
  dir="/images/samples/pages/"
  cfg="pages_presets/catalog_links.xml"
  pageLayout="flip"
  hideuiindemomode="false"
  skin="white"
  demourl="sample/brochure/"
  demoURLTarget="_blank"
  demoToolTip="Click to open brochure!">
</fsi-pages>
  • demourl="sample/brochure/" defines the link to the pages to open on click.
  • hideUiInDemoMode="false" hides the menu bar in demo mode.
  • skin="white" sets the skin to be displayed.
  • demoURLTarget="_blank" specifies whether the target will open in another window.
  • demoToolTip="Click to open brochure!" displays a thumbnail when the mouse is over it.

With tooltip, opens to FullScreen Mode​

This is what your code would look like if you wanted to open a full screen when clicking on a thumbnail. The tooltip is displayed when the mouse is over the thumbnail.

FSI Viewer​


<fsi-viewer
  width="300"
  height="200"
  skin="white"
  dir="/images/samples/cruiser/"
  hideuiindemomode="false"
  demourl="enter fullscreen"
  plugins="Resize, fullscreen"
  demoToolTip="Click to enter FullScreen Mode!">
</fsi-viewer>
  • plugins="Resize, fullscreen" activates the fullscreen plugin
  • demourl="enter fullscreen" enables fullscreen mode on click
  • hideUiInDemoMode="false" hides the menu bar in demo mode
  • demoToolTip="Click to enter fullscreen mode!" sets the tooltip to display on hover

FSI Showcase​



<style type="text/css">
  fsi-thumbbar.fsi-10-thumbs {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 784px;
    height: 60px;
  }

  div.fsi-showcase-10 {
    position: relative;
    width: 300px;
    height: 200px;
    box-sizing: border-box;
    padding-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<div id="Container_showcase_3" class="fsi-showcase-10">
  <fsi-viewer
    id="showcase_3"
    width="100%"
    height="100%"
    imagesource="images/samples/showcase/shoes/1.jpg"
    cfg="showcase_presets/showcase_flat.xml"
    skin="white"
    plugins="Resize, fullscreen"
    fullscreenelement="Container_showcase_3"
    demoURL="enter fullscreen"
    hideUIInDemoMode="false"
    demoToolTip="Click to open in FullScreen Mode!">
  </fsi-viewer>
  <fsi-thumbbar
    class="fsi-10-thumbs"
    viewerSelector="showcase_3"
    cfg="showcase_presets/showcase_flat.xml"
    dir="images/samples/showcase/shoes/"
    elementwidth="70"
    elementSpacing="8"
    scrollbar="false"
    paddingBottom="4"></fsi-thumbbar>
</div>

To ensure that everything is displayed correctly in fullscreen mode, a div with an ID must be placed around the FSI Viewer and FSI ThumbBar elements. This ID is then referenced in the fullscreen element parameter.

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