Frameworks and Libraries

There are a number of different JS/CSS frameworks and libraries used in KioSign.

  • Reveal.js: An HTML presentation framework used for playlists and repeating content. Has a robust API available.
  • Animate.css: A CSS library for simple animations. Useful for simple transitions.
  • jQuery: Jquery is loaded on KioSign content to insure compatibility.

Reveal.js

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:

<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>

Common “default” data attributes are applied through the settings for each playlist or gallery/repeater:

  1.  data-autoslide=”####” : Number of milliseconds for a slide
  2.  data-transition=”zoom” : Type of zoom for slides
  3.  data-transition=”slide-in fade-out” : Can add an in and out transition
  4.  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:

  1. data-background-color=” “ :
  2. data-background-image=” “ :
  3. data-background-iframe=” “ :

Video Backgrounds

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

iFrame backgrounds is especially useful! iFrame contents will expand/contract to fit the region you add them to. For example:

data-background-iframe="https://slides.com" data-background-interactive

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.

  1. Iframes with data-src=”” AND data-preload will be loaded when within the viewDistance
  2. iframes with only data-src=”” will be loaded when visible

Stretch Items

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>

Animate.css

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

jQuery must be loaded and referenced correctly to work in WordPress.

Wrap jQuery with an anonymous function:

(function($) { 
//jquery here
})( jQuery );

or with document ready:

$(document).ready(function(){ 
//jquery here
});