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:
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.
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)
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.
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.