The FSI Pages Tag
This is what the <fsi-pages> tag for our example looks like:
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.
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.
This part enables the display of the page numbers.
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.
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
Skin
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.