All skin specific functions are listed here. These functions only work in a skin, hpto or apto for the left.html, right.html and top.html.
For the skin are extra data points available within the PEXI.data object. All skin specific data is stored within the skin property:
PEXI.data = {
site: "nu.nl", //The site name without any https:// or www.
skin: {
offset: 30, //The top offset of the skin
topWidth: 1000, // The width of the top
screenWidth: 1920, //The width of the screen (updated on resize)
screenHeight: 1080, //The height of the screen (updated on resize)
skins: true, //A boolean that tells if the skins are shown or not
sticky: false, //Is the skin sticky true or false
scrollDepth: 0 //The amount off pixels that is scrolled measured from the top
skinsLoaded: true //Triggered if all 3 skins trigger onload
skinsReady: true //Triggered if the readyState of all 3 skins is complete
},
width: 640, //The width of the current iframe (can be different per iframe)
height: 1500 //The height of the current iframe (can be different per iframe)
};The PEXI.skinReady function is a callback function that checks if all skin sides are loaded. With these function you can sync timelines over the three sides:
PEXI.skinsReady(function(){
//Start your timeline, video or wallpaper function
});The PEXI.skinsWallpaper() function is a function to easily position a background image over the three different skin sides. To ensure that all sides are loaded it is advisable to call this function within the PEXI.skinReady() function.
PEXI.skinsReady(function(){
PEXI.skinsWallpaper();
//You can call other functions here
});The above functions searches for a .wallpaper div. This div need to be placed within the html within the body, for example:
<body>
<div class="wallpaper"></div>
</body>