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.
<fsi-pages id="myPages" customSkinClass="myCustomSkin">...</fsi-pages><!-- Skin start --><div id="mySkinContainer"> <!-- Previous Page button --> <div fsi-cmd="PreviousPage" class="PreviousPageButton"> <!-- Previous Page icon --> <span class="PreviousPagesIcon">Previous Page</span> </div> <!-- Next Page button --> <div fsi-cmd="NextPage" class="NextPageButton"> <!-- Next Page icon --> <span class="NextPagesIcon">Next Page</span> </div></div><!-- Skin End -->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:
xxxxxxxxxxmyCustomSkin = function () { "use strict"; var skinContainer, fpjs; var self = this; var init = function () { // Catching elements skinContainer = document.getElementById("mySkinContainer"); fpjs = document.getElementById("myPages"); // Adding fsi-pages listener fpjs.addListener("onRegisterExternalMenuButtons", registerButtons, self); }; var registerButtons = function () { return skinContainer; }; // other possible funtions init();}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:
xxxxxxxxxxPrintPageFirstPagePreviousPageNextPageLastPageToggleBookmarkListToggleBookmarkToggleTableOfContentsTogglePageIndexToggleFullScreen