Carousel From XML Module

The Carousel From XML Module dynamically generates an automatically accessible carousel control from an external XML file, which can be used as a carousel, slideshow, or wizard generator.
Module files:

  1. carousel_module.js : Adds the setCarousel() function to the window object.
  2. setup.js : Automatically activates carousel functionality using the setCarousel() function by referencing different XML files.

For specific coding guidance, view the AccDC Technical Style Guide

Features:

Auto Rotating Carousel

Rotating Carousel is fully configured and populated using the XML file carousel.xml.

Static Slideshow

Static Slideshow is fully configured and populated using the XML file movies.xml.

Dynamic Wizard

Dynamic Wizard is fully configured and populated using the XML file wizard.xml; interactive functionality is configured using callbacks and custom handlers declared in setup.js.

XML Syntax

Outer XML syntax; required for both grouped and ungrouped carousels.
<?xml version="1.0" encoding="UTF-8" ?>
<carousel role="REQUIRED: Hidden text role for screen reader users"
accStart="REQUIRED: Hidden text start keyword for screen reader users"
accEnd="REQUIRED: Hidden text end keyword for screen reader users"
height="REQUIRED: Total height of control"
width="REQUIRED: Total width of control"
className="Control class name for styling"
prevTitle="REQUIRED: Title text for the previous button"
nextTitle="REQUIRED: Title text for the next button"
slideName="General name for a slide, used with prevTitle and nextTitle for Next Slide and Previous Slide buttons"
isGrouped="REQUIRED: 'yes' or 'no': Must match the syntax of the XML whether or not group markup is included"
groupName="General name for a group, used with prevTitle and nextTitle for Next Group and Previous Group buttons"
showGroup="If 'yes', group names will be displayed above or below the carousel; depends on the value of groupPosTop"
groupPosTop="If 'yes', group names are displayed above the carousel, if not, then they are displayed below"
btnPText="Textual value of the Previous Slide button; uses innerHTML to insert"
btnNText="Textual value of the Next Slide button; uses innerHTML to insert"
btnPGText="Textual value of the Previous Group button; uses innerHTML to insert"
btnNGText="Textual value of the Next Group button; uses innerHTML to insert"
btnPAccesskey="accesskey for the Previous Slide button"
btnNAccesskey="accesskey for the Next Slide button"
btnPGAccesskey="accesskey for the Previous Group button"
btnNGAccesskey="accesskey for the Next Group button"
direction="REQUIRED: Must be either 'lr' (left to right), or 'tb' (top to bottom)"
cycle="REQUIRED: 'yes' or 'no' for infinite looping"
timer="REQUIRED: '0' to disable, or positive integer for automatic rotation in N milliseconds"
animDelay="REQUIRED: Slide animation length in milliseconds; set to '0' for instant transition"
forward="REQUIRED: 'yes' or 'no' to set auto rotation to move backwards or forwards"
hiddenMsg="Hidden text message for screen reader users" >
... Inner XML markup ...
</carousel>

Inner XML markup for slides with no grouping.
<slide announce="Text1 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 1 ...
]]></slide>
<slide announce="Text2 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 2 ...
]]></slide>

Inner XML markup for slides with grouping enabled.
<group name="Textual name for group 1" >
<slide announce="Text1 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 1 ...
]]></slide>
<slide announce="Text2 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 2 ...
]]></slide>
</group>
<group name="Textual name for group 2" >
<slide announce="Text3 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 3 ...
]]></slide>
<slide announce="Text4 to announce to screen reader users" ><![CDATA[
... HTML markup to display for slide 4 ...
]]></slide>
</group>

Important: All attributes must remain within the XML markup.
Attributes that are not required may be set to null. E.G. attributeName=""

Invocation, Callbacks and Handlers

The following invocation methods are available.
// Syntax
// setCarousel( ContainerObject, XML-FilePath, DefaultLoadPosition, HandlersAndCallback)

// Specify a container object where rendering will occur, an XML file to parse, and set the default position to group 1 slide 1
// Valid when isGrouped='yes' within the XML setup parameters (default pos must be a string with comma separated values)
setCarousel(document.getElementById('carouselId'), 'files/carousel.xml', '0,0');

// Specify a container object where rendering will occur, an XML file to parse, and set the default position to slide 1
// Valid when isGrouped='no' within the XML setup parameters (default pos must be an integer)
setCarousel(document.getElementById('slideshowId'), 'files/movies.xml', 0);

// Specify a container object where rendering will occur, an XML file to parse, set the default position to slide 1, and declare handlers for advanced functionality
setCarousel(document.getElementById('containerObj'), 'files/wizard.xml', 0, {

// Run before the Prev button is activated when clicked
btnPrev: function(ev, cdc){
// cdc.slideVal = current slide index value
// cdc.groupVal = current group index value (only when isGrouped='yes' in the XML)
// Return false to cancel
},

// Run before the Next button is activated when clicked
btnNext: function(ev, cdc){
// cdc.slideVal = current slide index value
// cdc.groupVal = current group index value (only when isGrouped='yes' in the XML)
// Return false to cancel
},

// Run before the Prev Group button is activated when clicked
btnPrevG: function(ev, cdc){
// cdc.slideVal = current slide index value
// cdc.groupVal = current group index value
// Return false to cancel
},

// Run before the Next Group button is activated when clicked
btnNextG: function(ev, cdc){
// cdc.slideVal = current slide index value
// cdc.groupVal = current group index value
// Return false to cancel
},

// Run after a new slide finishes loading
complete: function(cdc){
// cdc.slideVal = current slide index value
// cdc.groupVal = current group index value (only when isGrouped='yes' in the XML)
}

});