Status Variables- "status1", "status2", and "status3"

Status Variables gives you live access to the index numbers of the currently shown panel(s), plus the total number of panels. Status Variables is enabled by declaring an optional "statusvars" parameter when initializing the script, and entering 3 arbitrary but unique strings:

<script type="text/javascript">

stepcarousel.setup({
galleryid: 'galleryA', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:300, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['leftnav.gif', -36, 80], rightnav: ['rightnav.gif', 10, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], // Register 3 "status" variables
contenttype: ['inline'] // content type <--No comma following the very last parameter, always!
})

</script>

In other words, 'statusA', 'statusB', and 'statusC' can be named anything, but should be unique to each Carousel Viewer instance (if there are more than one instance) on the same page. So what happens when you declare these three strings? Well, the script now will now use them to inform you of the first panel currently in view, the last panel currently in view, and finally, the total panels in the Viewer. It does this by:

  1. Create 3 actual global JavaScript variables with the same names to store this info.
  2. Populate up to 3 HTML elements on your page with ID attributes equal to these status variable names with this info.

Basically, Status Variables gives you access to the indices of the currently shown panels (count starts at 1, not 0), both as JavaScript variables, and as text added inside HTML elements. You use them either inside any JavaScript as global variables, or more commonly, just as a way to easily display on your page what panels are currently being shown. Here are two examples on utilizing Status Variables to help clear the fog:

Using Status Variables as HTML elements

Using the initialization code above...

<!--Status Variables as HTML elements-->

<b>Current Viewing Panels:</b> <span id="statusA"></span> to <span id="statusB"></span><br />

<b>Total Panels:</b> <span id="statusC"></span>

1
2
3
4
5
6

Current Viewing Panels: to
Total Panels:

Back 1 Panel Forward 1 Panel

Here's I'm giving three SPAN elements ID attributes matching the Status Variable names. You can use just one of the variables, two, or all three, it's up to you. Carousel Viewer detects what's available and populates these elements with the corresponding info. Notice the difference between the info contained inside "statusA" and "statusB": The first Status Variable contains the starting panel that's currently in view, while the second contains the very last panel currently in view (partially clipped panels do not count). In the event where your Carousel Viewer only shows one panel fully at a time, these two Status Variables point to the same panel.

Using Status Variables as JavaScript variables

Status Variables are also automatically converted into actual JavaScript global variables for you to use within your own scripts. A most basic example would be populating two FORM text boxes with the current panels' indices each time the user slides the Carousel Viewer (by also enlisting the help of the onslide() event handler btw):

<script type="text/javascript">

stepcarousel.setup({
galleryid: 'galleryB', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:300, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['leftnav.gif', -36, 80], rightnav: ['rightnav.gif', 10, 80]},
statusvars: ['startp', 'endp', 'totalp'], // Register 3 "status" variables
contenttype: ['inline'], // content type <--No comma following the very last parameter, always!
onslide:function(){
 document.getElementById('field1').value=startp
 document.getElementById('field2').value=endp
}

)

</script>

<form id="report" name="report">
Currently viewing panels <input id="field1" type="text" size="2" /> through <input id="field2" type="text" size="2" />
</form>

Currently viewing panels through
1
2
3
4
5
6

Back 1 Panel Forward 1 Panel

Each time the user slides to a panel (hence the use of the onslide() event handler), two text fields are populated using the global JavaScript variables created by the Status Variables. This is obviously a very simple example just to illustrate how it works. More info on the onslide() event handler on the next page.

Table Of Contents

This script consists of an index page plus 4 supplementary pages:

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post