More then one step carousel on the same page

[mitja]

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.

[jscheuer1]

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.

[mitja]

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

[awesomewebguy]

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!

[jscheuer1]

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:

<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:

<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:

<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:

<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:

 <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.