K&L Slide Show is a client side script which provides the highly configurable slide show presentation without affecting the accessibility of content in legacy browsers and those without required javascript functionality.
The script imposes no restrictions on content of slides nor it's presentation within a slide.
K&L Slide Show script .
Following is the basic template for the slide show content. It consists of a block element representing the slide show and any number of child block elements representing individual slides.
<div klslideshow="Slide show options">
<div klslide="Slide options">
Slide content
</div>
<div klslide="Slide options">
Slide content
</div>
<div klslide="Slide options">
Slide content
</div>
</div>The content of slides can be comprized of any HTML elements valid within a block element. K&L Slide Show script does not impose any restrictions on styling of individual slides and slide show container.
It should be noted that any child of slide show container that does not have the klslide attribute is deleted during slide show initialization
K&L Slide Show script provides two ways for controling the slide show flow. First way, sufficient for most applications, is to include control elements within the web page and allow the script to automaticaly handle the flow of events.
K&L Slide Show script supports the following conrol elements:
Each control element must have a unique ID which is passed to the script using slide show options string.
K&L Slide Show script is configured using an options string that is used as a value of the klslideshow attribute. The options string uses CSS-like format of semi-colon separated property=value pairs. Following is the list of the slide show options:
Following is an example of an option string for a slide show that has no input controls and is used to continiously loop a set of images:
<div id="SimpleSS" klslideshow="class-name:simpless;start:auto;loop:true;delay:3s"> <!-- Slide Show content --> </div>
In the following example the options string defines a slide show with complete set of input controls. The HTML code for the controls is also provided.
<div id="CompleteSS" klslideshow="class-name:completess;
slide-titles:h3;
control-start:ssStart;
control-stop:ssStop;
start:manual;
loop:false;
control-next:ssNext;
control-previous: ssPrev;
control-home: ssFirst;
control-end: ssLast;
control-toc:ssTOC;
control-counter: ssCounter;
delay: 10s">
<!-- Slide Show content -->
</div>
<div id="ssctrls">
<button id="ssFirst">Start</button>
<button id="ssPrev">Previous</button>
<button id="ssStart">Go</button>
<button id="ssStop">Stop</button>
<button id="ssNext">Next</button>
<button id="ssLast">End</button>
<br />Slide: <span id="ssCounter">Counter</span><br />
Go To Slide: <select id="ssTOC"><option>Slide Show TOC</option></select>
</div>
Besides the slide show options, the K&L Slide Show script provides individual slide options that allow to further customize individual slides and their behaviour. The slide options are specified as a value of klslide attribute of a slide element. The following are the slide options:
Following is an example of slide options:
<div klslide="class-name: slide; title: Slide 5; delay: 12s"> <!-- Slide Content --> </div>
The file containing the K&L Slide Show script is added to the web page using script element:
<script type="text/javascript" src="scriptsFolder/klslideshow.js" ></script>
The slide show initialization is done by calling klSlideShow.init() function from the body onload event handler:
<body onload="klSlideShow.init();">
K&L Slide Show programming interface allows to control the slide show advancement via javascript. It allows to utilize the script for applications where additional processing is required between slide advances and/or such advancement is conditional.
The slide show object is accessed through the slide show container element. The script adds the klss property to it during slide show initialization:
<div id="slideShow" klslideshow="class-name:klss;start:manual;loop:false">
<!-- Slide Show content -->
</div>
<script type="text/javascript">
klSlideShowObject = document.getElementById('slideShow').klss
</script>
In order to navigate through the slide show, scripts can use the currentSlide property that stores the index of currently displayed slide and goToSlide function, that takes the destination slide index as an argument.
//Go to the next slide klSlideShowObject.goToSlide(klSlideShowObject.currentSlide+1); //Go to the previous slide klSlideShowObject.goToSlide(klSlideShowObject.currentSlide-1); //Go to the first slide klSlideShowObject.goToSlide(0); //Go to the last slide klSlideShowObject.goToSlide(klSlideShowObject.slides.length-1);