PDA

View Full Version : Step Carousel Viewer - Additional onslide() event



Azteccoupe
11-14-2009, 01:06 PM
1) Script Title: Step Carousel Viewer v1.8

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem: The Step Carousel viewer's onslide() event function updates a DIV with the corresponding description for each panel, I would like to be able to update an additional DIV with content at the same time. How can the script be expanded to allow this? Thanks a bunch.

jscheuer1
11-14-2009, 07:07 PM
You could just duplicate everything appending '2' to the variable names and id, ex:


<script type="text/javascript">

var contentarray=new Array() //Array storing the corresponding description for each Carousel panel
contentarray[0]="A fruit a day keeps the doctor away!"
contentarray[1]="Some day I will visit one of these lovely caves!"
contentarray[2]="Nothing beats floating around in the pool when it's hot"
contentarray[3]="Autumn, the season that just doesn't get no respect!"

var contentarray2=new Array() //Array storing the corresponding description for each Carousel panel
contentarray2[0]="Something Else"
contentarray2[1]="Some other stuff!"
contentarray2[2]="Nothing beats making up text for demos"
contentarray2[3]="Salt, the seasoning that just doesn't go away!"

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: ['arrowl.gif', -10, 100], rightnav: ['arrowr.gif', -10, 100]},
statusvars: ['imageA', 'imageB', 'imageC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
oninit:function(){
contentcontainer=document.getElementById('relatedcontent') //reference DIV used to contain related content
contentcontainer2=document.getElementById('relatedcontent2') //reference DIV used to contain related content
},
onslide:function(){
//Update DIV with this panel's related content (notice imageA-1 as the array index, as imageA starts at 1, while array at 0
contentcontainer.innerHTML=contentarray[imageA-1]
contentcontainer2.innerHTML=contentarray2[imageA-1]
}
})

</script>

<div id="relatedcontent" style="margin-top: 5px; font: normal 13px Verdana">
<div id="relatedcontent2" style="margin-top: 5px; font: normal 13px Verdana">
</div>