Skip to main content

How to add FSI Pages

FSI Pages script​

I) Add the fsipages.js script to the <head> of your document

Adding the script:
<head>
  //adding the fsipages.js script
  <script src="//yourdomain.com/fsi/viewer/applications/pages/js/fsipages.js" type="text/javascript"></script>
</head>

<fsi-pages> tag​

II) Add a <fsi-pages> tag to the part of your document body where the catalog should be displayed. Add the desired dimension and the image directory to it:

Integrate FSI Pages JS:
<body>
  <fsi-pages width="100%" height="100%" dir="/images/catalog/">
    //here you can place the fallback content (or image) in case the browser
    //cannot display the viewer, e,g,:
    <b>Sorry</b>, your browser is not capable of running FSI Pages
  </fsi-pages>
</body>

Parameters​

Parameters are added to the <fsi-pages> tag. Note that you can as well use FSI Pages configuration files:

Adding Parameters to FSI Pages JS:
<head>
  //adding the fsipages.js script
  <script src="//yourdomain.com/fsi/viewer/applications/pages/js/fsipages.js" type="text/javascript"></script>
</head>
<body>
  //Adding parameters directly to the tag:
  <fsi-pages width="500" height="600" dir="/images/catalog/" debug="true" skin="silver" PageLayout="flip">
  </fsi-pages>
  //Example with using a FSI Pages configuration file:
  <fsi-pages width="500" height="600" dir="/images/catalog/" cfg="sample/catalog.xml">
  </fsi-pages>
</body>

Configuration Files​

You can define individual configuration .xml files like this:

Simple Configuration File
<fsi_parameter>
  <image>
    <path value="samples/Watch.jpg" />
  </image>
  <Pages>
    <skin value="silver" />
    <debug value="1" />
    <pagelayout value="flip" />
    <thumbsize value="100" />
    <bendeffect value="none" />
  </Pages>
</fsi_parameter>

Configuration via _default.xml​

If you would like to use global parameters for all FSI Pages instances, the corresponding parameters can be defined in the _default.xml.

Example _default.xml:
<fsi_parameter>
  <Image>
    <ServerType value="FSI"/>
  </Image>
  <Pages>
    <skin value="silver" />
    <debug value="1" />
    <pagelayout value="flip" />
    <thumbsize value="100" />
    <bendeffect value="none" />
  </Pages>
  <Options>
    <FSIBase value="config/"/>
    <Language value="english"/>
    <ScenePreload value="true"/>
  </Options>
</fsi_parameter>