This tutorial shows you how to create a custom external skin by using the CustomSkinClass parameter. In this tutorial you will learn how to create the corresponding HTML code, JS file, CSS file and the HTML fragment which is implemented with CustomSkinClass.

The FSI Pages Tag

This is what the <fsi-pages> tag for our example looks like:

Copy to Clipboard

customSkinClass=”skins/custom/CustomPagesSkinTest.js” is the most important parameter in this example – it defines which JS will be loaded in order to create the custom skin.

skin=”custom/CustomPagesSkinTest.css”  defines the CSS which will contain all skin relevant style elements.

It is important to set hideUI=”true”, otherwise the regular UI will be displayed as well.

CustomSkinClass JavaScript

Let’s take a look at the JavaScript which was set in customSkinClass=”skins/custom/CustomPagesSkinTest.js” in <fsi-pages>.

We will fragment the JavaScript for better readability. You can download the complete JavaScript here.

Copy to Clipboard

Please Note: it is cruicial to name the main function – here function CustomPagesSkinTest(iViewerInstance, elContainer, fnSkinReady, iCustomSkin) – in the exact same way as the JavaScript file. Otherwise FSI Pages will not be able to load the content.

iCustomSkin.loadHTMLFragment(“[fsi-skin-path]skin-example-test.html”, elContainer, onSkinHTMLInserted); defines the location of the HTML fragment which will be loaded. The HTML fragment will contain all custom skin relevant code that is build around the FSI Pages instance.

Copy to Clipboard

This part enables the display of the page numbers.

Copy to Clipboard

The class .viewer-container in the HTML fragment defined above contains the part where the FSI Pages tag will be displayed in.

 iViewerInstance.addListener('onRegisterExternalMenuButtons', registerButtons, self);

then adds the functionality based on which fsi-cmd is stated in the button element (see below)

HTML Fragment

With iCustomSkin.loadHTMLFragment a fragment is defined in the JS file which will be loaded. In this fragment, you will define everything that your skin should include. For demonstration purposes, you can download the fragment here.

Copy to Clipboard

You can create the content of the HTML fragment however you like, but it is important to set the class viewer-container at the place where you would like to have FSI Pages displayed in.

The ID content defines the part in which the buttons should be registered.

Button functions need to be defined with the accompaning fsi-cmd command in order for the FSI Viewer/Pages to register it’s function. E.g. if you set fsi-cmd=”previousPage”, the corresponding method previousPage is called. You can read more about the available methods in the JavaScript Section of the FSI Viewer manual.

The following commands used here are:

  • PreviousPage – turns back to the previous page
  • NextPage – turns to the next page
  • ToggleFullScreen – enables FullScreen mode (in order to be displayed, the plugin needs also to be defined in the <fsi-pages> tag)
  • ToggleBookmark – sets a bookmark on the current page (in order to be displayed, the plugin needs also to be defined in the <fsi-pages> tag)
  • ToggleBookmarkList – shows an overview of all bookmarks (in order to be displayed, the plugin needs also to be defined in the <fsi-pages> tag)
  • TogglePageIndex – shows a Page Index of the whole catalog


Lastly, you can define a custom CSS with  skin=”custom/CustomPagesSkinTest.css” in the FSI Pages tag which will contain all relevant CSS elements.

The CSS used in the example is not listed here due to the lenght but you can download it here.