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:
- Create 3 actual global JavaScript variables with the same names to store this info.
- 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>
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>
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: