If changing the default skins by means of CSS does not end up with the desired results, you can also create your own HTML elements and assign button functions to these elements. This way the different buttons can be aligned freely around the FSI Viewer JS or FSI Pages JS instance, e.g. have the page changing buttons left or right of the FSI instance.
While this tutorial focuses on FSI Pages JS, the same concept applies to FSI Viewer JS with different Button IDs.
To bind FSI Pages JS function to custom HTML elements, you need to provide a container element that includes all the button elements you want to use. Inside this container you define your elements (e.g. DIVs) and assign fsi-cmd attributes that match the FSI Pages JS Button ID.
We create two such DIV elements in line 7 and 13 here. Please note the customSkinClass attribute defined for the fsi-pages node in line 1.
We need to define a Javascript function with the same name to make it work:
When initialising FSI Pages JS we assign the “mySkinContainer”, which will be searched for elements with “fsi-cmd” attributes and the according behaviour will be assigned. This is done calling the registerButtons function which will return the container element, when the FSI Pages JS event
onRegisterExternalMenuButtons is executed.
The possible Button IDs you can use as fsi-cmd attributes for FSI Pages JS are as follows: