Slide Data

Insert an Image for each slide in the slideshow. Optionally add some Overlay text, an MP3 Audio clip, set a specific effect FX for the transition (none, fade, fadeout, or scrollHorz), choose the transition animation Speed (1000 = 1 second animation) and the Timeout speed for a slide that progresses to the next slide in an auto-running slideshow (4000 = 4 seconds viewing the slide).
Image Overlay Audio fx speed timeout
The logon background image.
The registration background.
The Janison default Male portrait
... and the Female portrait.

Panel Options
Name Type Default Value Custom Value Description

Override a Default Value by entering your setting in the Custom Value field.
content-completed-percentage number 0 100 Percentage of content that needs to be viewed to mark this interactive content as being "completed". Default is 100 indicating that 100% of the slides need to be viewed. If set to 0 the content is marked as complete as soon as the slideshow loads. If set to 50 then half of the slides need to be viewed.
slideshow-container-outer jQuery selector #slideshow-outer A jQuery ID selector which identifies an element that wraps the Cycle2 element.
We currently only support ONE slideshow on the page.
slideshow-container jQuery selector #slideshow A jQuery ID selector which identifies the element that should be initialized by Cycle2.
We currently only support ONE slideshow on the page.
slideshow-controls-inside boolean true false Determines if the controls prev, next, pager, caption and overlay will be "inside" the slideshow (overlaying the image). If set to false the controls will sit under the image.
slideshow-outer-no-padding boolean false When slideshow-controls-inside is set to false the slideshow's outer wrapper has enough padding for the prev and next controls to not overlap the slideshow. If slideshow-outer-no-padding is set to true this outer padding is removed resulting in the slideshow having more width and the prev and next buttons overlapping the slideshow.
slideshow-outer-forced-width integer false Force a specific width on the slideshow's outer container. Only works with a pixel integer value e.g. for 500px enter 500. Set to false to disable forced width.
slideshow-outer-forced-height integer false Force a specific height on the slideshow's outer container. Only works with a pixel integer value e.g. for 500px enter 500. Set to false to disable forced width.
slideshow-forced-width integer false Force a specific width on the slideshow container. Only works with a pixel integer value e.g. for 300px enter 300. Set to false to disable forced width.
slideshow-forced-height integer false Force a specific height on the slideshow container. Only works with a pixel integer value e.g. for 300px enter 300. Set to false to disable forced height.
slideshow-wide boolean false Makes the slideshow better on a wide (100%) pannel.
slideshow-background-color CSS color false A CSS color value to use as the background-colour of the slideshow e.g. #FFFFFF for white. Set to false to use the already set CSS styles. If a slide uses the "fade" transition (fx) you will see the color during the fade animation. If you use "fadeout" you won't see the background color (instead you see the next image during the fade animation).
slideshow-background-image URL none A URL to an image that will be used as the background-image for the slideshow. The image is positioned in the center of the slideshow and can be seen between "fade" transitions. This may be useful for showing a "loading" GIF image during transitions to large images.

Slideshow Settings (for Cycle2)

Override a Default Value by entering your setting in the Custom Value field.

We are using Cycle2 jQuery Plugin for our slideshow (read the API and checkout the DEMOS).

Options in the table below that have a "•" symbol could be overridden on individual slide elements in order to have specific properties for specific slides. However, this Janison template currently only supports: fx, speed and timeout settings on a per-slide-basis (these are set in the Panel Data table above).
Name • Type Default Value Custom Value Description
allow-wrap boolean true false This option determines whether or not a slideshow can advance from the last slide to the first (or vice versa). If set to false then once a slideshow reaches its last slide it can no longer be advanced forward, it can only advance backward. Likewise, when a slideshow is displaying the first slide it can not advance backward.

By default a slideshow will advance seamlessly from the last slide to the first.
caption jQuery selector > .cycle-caption #slide-caption A selector which identifies the element that should be used for the slideshow caption. By default, Cycle2 looks for an element with the class .cycle-caption that exists within the slideshow container.
caption-template • string [[slideNum]] / [[slideCount]] A template string which defines how the slideshow caption should be formatted. The template can reference real-time state information from the slideshow, such as the current slide index, etc.

Cycle2 uses simple Mustache-style templates by default.
delay integer 0 The number of milliseconds to add onto, or substract from, the time before the first slide transition occurs.
disabled-class string disabled The classname to assign to prev/next links when they cannot be activated (due to data-cycle-allow-wrap="false".
The value of this option should not include a preceding "dot".
fx • string fade fadeout The name of the slideshow transition to use. The following transition names are available by default and more can be added with plugins: fade, fadeout, none, and scrollHorz.
log boolean true false Set to false to disable console loggin. Enable it to help with debugging.
loop integer 0 The number of times an auto-advancing slideshow should loop before terminating. If the value is less than 1 then the slideshow will loop continuously. Set to 1 to loop once, etc.
Setting the allow-wrap option to false will override looping.
manual-speed • integer undefined The speed (in milliseconds) for transitions that are manually initiated, such as those caused by clicking a "next" button or a pager link. By default, manual transitions occur at the same speed as automatic (timer-based) transitions.
manual-trump boolean true Determines whether or not transitions are interrupted to begin new ones if the new ones are the result of a user action (not timer)
next jQuery selector > .cycle-next #slide-next A selector string which identifies the element (or elements) to use as a trigger to advance the slideshow forward. By default, Cycle2 looks for an element with the class .cycle-next that exists within the slideshow container.
Entering 'courseplayer' as the element identifier will force the slideshow to use the main 'Previous' & 'Next' controls as the slideshow naviagtion.
overlay jQuery selector > .cycle-overlay #slide-overlay A selector string which identifies the element to use as the overlay element. A slideshow overlay typically provides information about the current slide. By default, Cycle2 looks for an element with the class .cycle-overlay that exists within the slideshow container.
overlay-template • string <div>[[title]]</div><div>[[desc]]</div> <div>[[overlay]]</div> A template string which defines how the overlay should be formatted. The template can reference real-time state information from the slideshow, such as the current slide index, etc.

Cycle2 uses simple Mustache-style templates by default.
pager jQuery selector > .cycle-pager #slide-pager A selector string which identifies the element to use as the container for pager links. By default, Cycle2 looks for an element with the class .cycle-pager that exists within the slideshow container.
pager-active-class string (css classname) cycle-pager-active The classname to assign to pager links when a particular link references the currently visible slide.
The value of this option should not include a preceding "dot".
pager-template • string <span>&bull;</span> <a href="#"></a> A template string which defines how the pager links should be formatted. The template can reference real-time state information from the slideshow as each slide is added.

The default pager link is simply a bullet.

Cycle2 uses simple Mustache-style templates by default.
pause-on-hover boolean or string false If true an auto-running slideshow will be paused while the mouse is over the slideshow.
You may also specify a jQuery selector string for the value in order to specify the element(s) to which the hover events should be bound.
paused boolean false If true the slideshow will begin in a paused state.
prev jQuery selector > .cycle-prev #slide-prev A selector string which identifies the element (or elements) to use as a trigger to advance the slideshow backward. By default, Cycle2 looks for an element with the class .cycle-prev that exists within the slideshow container.
Enter ing 'courseplayer' as the element identifier will force the slideshow to use the main 'Previous' & 'Next' controls as the slideshow naviagtion.
random boolean false If true the order of the slides will be randomized. This only effects slides that are initially in the markup, not slides added via the add command or via Cycle2's image loader functionality.
slide-active-class string cycle-slide-active The classname to assign to the active slide.
The value of this option should not include a preceding "dot".
slide-css • object hash { position: 'absolute', top: 0, left: 0 } An object which defines css properties that should be applied to each slide as it is initialized (once).
slide-class string cycle-slide Name of the class to add to each slide.
slides jQuery selector > img A selector string which identifies the elements within the slideshow container that should become slides.

By default, Cycle2 finds all image elements that are immediate children of the slideshow container.
speed • integer 500 The speed of the transition effect in milliseconds.
starting-slide integer 0 The zero-based index of the slide that should be initially displayed.
sync boolean true If true then animation of the incoming and outgoing slides will be synchronized. If false then the animation for the incoming slide will not start until the animation for the outgoing slide completes.
timeout • integer 4000 0 The time between slide transitions in milliseconds. Set to 0 to prevent automatic slide transition (i.e. user must manually click "next" to progress to the next slide).
update-view number -1 Determines when the updateView method is invoked (and event is triggered).

If the value is -1 then updateView is invoked immediately upon the beginning of a slide transition and again immediately after the transition.

If the value is 1 then updateView is only invoked immediately after a slide transition.
caption-plugin string undefined caption2 This must be set to "caption2" to enable this plugin.
caption-fx-out string fadeOut hide Animation out effect for caption. Set to hide to prevent fx.
caption-fx-in string fadeIn show Animation in effect for caption. Set to show to prevent fx.
caption-fx-sel jQuery selector undefined Selector to identify the elements within the caption that should be animated. Leave undefined to animate the entire caption element.
overlay-fx-out string fadeOut Animation out effect for overlay. Set to undefined to prevent fx.
overlay-fx-in string fadeIn Animation in effect for overlay. Set to undefined to prevent fx.
overlay-fx-sel string undefined > * Selector to identify the elements within the overlay that should be animated. Leave undefined to animate the entire overlay element.
center-horz boolean false true Set to true to enable horizontal auto-centering of your slides.
center-vert boolean false true Set to true to enable vertical auto-centering of your slides.

Slide Media Options
Name Type Default Value Custom Value Description

Override a Default Value by entering your setting in the Custom Value field.
flash-player-url string /Scripts/jwplayer/player.swf URL to JWPlayer swf file (tested using JWPlayer version 5.10.2295)
flash-player-skin string /Scripts/jwplayer/skins/five-20/five-20.zip URL to JWPlayer skin file (for theming the player). See more JWPlayer v5.x skins.
slidemedia-container-outer jQuery selector #slidemedia-outer A jQuery ID selector which identifies an element that wraps the Slide Media (JWPlayer).
slidemedia-container jQuery selector #slidemedia A jQuery ID selector which identifies the element that should be initialized by JWPlayer
set-container-min-height boolean true If set to true the slidemedia-container-outer element will be given a CSS min-height equal to the media players height. This prevents the slideshow container height from "jumping" up in height when the media player is loaded and added to the page. Most useful when navigating between slides with media, to slides without media.
height string 20px Height of the media player. Note: 20px sets JWPlayer as a "mini-player" for audio.
width string 100% Width of the media player.
preview string undefined File path to an image that will be displayed as a placeholder while media content is loaded
autostart boolean true Should media automatically play when the slide has finished loading. If set to false then the user must click the play button to start media playback.
is-audio boolean true Optimise the media player for audio playback. Note: if set to false the media play can be used to display videos - but video functionality has not been fully tested.
repeat boolean false Should media loop it's playback i.e. keep on repeating over and over.
clear-on-nav boolean false Should media be completely removed when you navigate to another slide in the slideshow, then re-created when you return to this slide. When set to true this setting takes precedence over hide-on-nav (because the media is litterally removed from the DOM).
hide-on-nav boolean true Should media be hidden (and stop playing) when you navigate to another slide in the slideshow. If set to false the player will still be visible and playing (unless you set pause-on-nav) when you navigate to other slides.
pause-on-nav boolean false When hide-on-nav is true should the audio be "paused" so that when you return to the slide it will continue playing from where it left off. If set to false the audio will start playback from the begining when you return to the slide. If hide-on-nav is false and pause-on-nav is true the media remains visible, but is paused as you navigate away from the slide that started it.