Results 1 to 5 of 5

Thread: More then one step carousel on the same page

  1. #1
    Join Date
    Jan 2009
    Location
    Trieste, Italy
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default More then one step carousel on the same page

    1) Script Title: Step Carousel Viewer v1.6.1

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

    3) Describe problem: How can I put more than one step carousel each one with different properties on the same page?

    Probably it was answered, but I can't see it.
    Last edited by jscheuer1; 01-10-2009 at 03:37 PM. Reason: fix broken link to the script

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    See the information under:

    Basic Set Up Information

    especially:

    Sample Step Carousel invocation code

    You must have a separate invocation with unique values for at least the red items for each carousel. These must correspond to those used in the HTML markup for that carousel.

    See also, the tables near the bottom of the page explaining what each thing does.
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mitja (01-10-2009)

  4. #3
    Join Date
    Jan 2009
    Location
    Trieste, Italy
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick replay.
    I will read very carefuly those parts to see how to implement it.

  5. #4
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi there, this is an awesome script, although I think I'm struggling with the same problem, I can't seem to crack.

    I have the below -

    <div id="gallerya" class="stepcarouselA">
    <div class="belta">
    <div class="panela"><img src="http://i30.tinypic.com/531q3n.jpg" /></div>
    <div class="panela"><img src="http://i29.tinypic.com/xp3hns.jpg" /></div>
    <div class="panela"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></div>
    <div class="panela"><img src="http://i31.tinypic.com/119w28m.jpg" /></div>
    <div class="panela"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></div>
    </div>
    </div>
    <div id="galleryb" class="stepcarouselB">
    <div class="beltb">
    <div class="panelb"><img src="http://i30.tinypic.com/531q3n.jpg" /></div>
    <div class="panelb"><img src="http://i29.tinypic.com/xp3hns.jpg" /></div>
    <div class="panelb"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></div>
    <div class="panelb"><img src="http://i31.tinypic.com/119w28m.jpg" /></div>
    <div class="panelb"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></div>
    </div>
    </div>

    initialised via -


    <script type="text/javascript">
    stepcarouselA.setup({
    galleryid: 'gallerya', //id of carousel DIV
    beltclass: 'belta', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panela', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:3000},
    panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline']
    })

    stepcarouselB.setup({
    galleryid: 'galleryb', //id of carousel DIV
    beltclass: 'beltb', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panelb', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:3000},
    panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
    statusvars: ['statusD', 'statusE', 'statusF'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline']
    })

    </script>

    This works fine if left to autostep, although additionally I'm after adding in some links as well to control the 2nd carousel:

    <a href="javascript:stepcarouselB.stepTo('galleryb', 1)">To 1st Panel</a>
    <a href="javascript:stepcarouselB.stepTo('galleryb', 2)">To 2nd Panel</a>
    <a href="javascript:stepcarouselB.stepTo('galleryb', 3)">To 3rd Panel</a>
    <a href="javascript:stepcarouselB.stepTo('galleryb', 4)">To 4th Panel</a>
    <a href="javascript:stepcarouselB.stepTo('galleryb', 5)" id="mytest1">To 5th Panel</a>

    This'll work a little while and then freeze, there's no errors displayed - please help!

    Any advice greatly appreciated!

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Unless you edited the script, which you shouldn't do for this, there is no stepcarouselA or stepcarouselB, follow the instructions on the demo page using unique values for the red items:

    Code:
    <script type="text/javascript">
    
     stepcarousel.setup({
     galleryid: 'mygallery', //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: ['statusA', 'statusB', 'statusC'], // Register 3 "status" variables
     contenttype: ['inline'] // content type <--No comma following the very last parameter, always!
     })
    
     </script>
    Then in your markup, these must be reflected, the unique id and two unique classes for that carousel:

    Code:
    <div id="mygallery" class="stepcarousel">
     <div class="belt">
    
     <div class="panel">
     Panel 1 content here...
     </div>
    
     <div class="panel">
     Panel 2 content here...
     </div>
    
     <div class="panel">
     Panel 3 content here...
     </div>
    
     </div>
     </div>
    All carousels get the stepcarousel class as shown.

    For a second gallery:

    Code:
    <script type="text/javascript">
    
     stepcarousel.setup({
     galleryid: 'mygallery2', //id of carousel DIV
     beltclass: 'belt2', //class of inner "belt" DIV containing all the panel DIVs
     panelclass: 'panel2', //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: ['statusA', 'statusB', 'statusC'], // Register 3 "status" variables
     contenttype: ['inline'] // content type <--No comma following the very last parameter, always!
     })
    
     </script>
    And:

    Code:
    <div id="mygallery2" class="stepcarousel">
     <div class="belt2">
    
     <div class="panel2">
     Panel 1 content here...
     </div>
    
     <div class="panel2">
     Panel 2 content here...
     </div>
    
     <div class="panel2">
     Panel 3 content here...
     </div>
    
     </div>
     </div>
    To make controls for the second one:

    Code:
     <a href="javascript:stepcarousel.stepTo('mygallery2', 1)">To 1st Panel</a>
     <a href="javascript:stepcarousel.stepTo('mygallery2', 2)">To 2nd Panel</a>
     <a href="javascript:stepcarousel.stepTo('mygallery2', 3)">To 3rd Panel</a>
    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - 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
  •