Frameworks and Libraries
There are a number of different JS/CSS frameworks and libraries used in KioSign.
Reveal.js is used for KS Playlists and KS Slide galleries and repeaters. Defaults are set, but you can change the values as needed.
Find out more at github.com/hakimel/reveal.js/#api
The basic output, before adding additional data attributes is:
Common “default” data attributes are applied through the settings for each playlist or gallery/repeater:
- data-autoslide=”####” : Number of milliseconds for a slide
- data-transition=”zoom” : Type of zoom for slides
- data-transition=”slide-in fade-out” : Can add an in and out transition
- data-transition-speed=”fast” : Speed of transition for slide:
In addition, there is a “Reveal Attribute” field which allows you to add additional data attributes from the reveal.js api. For example:
- data-background-color=” “ :
- data-background-image=” “ :
- data-background-iframe=” “ :
Video backgrounds are possible with additional attributes. For example:
data-background-video="sample.mp4,sample.webm" data-background-video-loop data-background-video-muted
iFrame backgrounds is especially useful! iFrame contents will expand/contract to fit the region you add them to. For example:
Lazy-Loading/Pre-loading Content in Reveal.js sections.
Reveal.js slide content is typically loaded at init of the slider, whether that slide is visible or not. You can also load the content only when the slide becomes visible… or it can be pre-loaded.
- Iframes with data-src=”” AND data-preload will be loaded when within the viewDistance
- iframes with only data-src=”” will be loaded when visible
Add the .stretch class to items in a slide (like images or video) to have them stretch to fill the space.
<video class="stretch" src="sample.mp4"></video>
Super-simple and effective animation library using css classes.
In order to animate an element, you must first add the class “animated” and then the class for the type of animation. You can also add the class “infinite” to continuously loop the animation. Delays can be added with the “delay-#s” class, and animation speed can be adjusted with classes. Find the full list of classes at https://github.com/daneden/animate.css.
jQuery must be loaded and referenced correctly to work in WordPress.
Wrap jQuery with an anonymous function:
})( jQuery );
or with document ready: