Results 1 to 2 of 2

Thread: Step Carousel Viewer - Additional onslide() event

  1. #1
    Join Date
    Jan 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer - Additional onslide() event

    1) Script Title: Step Carousel Viewer v1.8

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You could just duplicate everything appending '2' to the variable names and id, ex:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •