Step Carousel - double rows

[Al Fresco]

1) Script Title: Step Carousel Viewer 1.9

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

3) Describe problem: I'm using Step Carousel Viewer. It works great but I would like it to run in two or three rows as in the graphic below. I have tried tables etc but without luck. Can anyone please help.

Many Thanks.

[ddadmin]

Are the rows thumbnail links that go to a particular slide within a single Carousel?

[Al Fresco]

Hi DD,
Thanks for the reply.

Yes they are thumbnails. They link to a slideshow on the same page. I am using jscheuer1's incredibly robust viewfadeslaide (jsjqslideshow_2b.js) (Thanks John) as shown here on DD. http://www.dynamicdrive.com/forums/s...l+Fader&page=4

Any Thoughts?
Cheers, AF

[ddadmin]

Hmm just to clarify then, are you trying to create the rows of thumbnails for Step Carousel, or John's Slideshow script? For either though, the thumbnails consist simply of HTML markup, so as long as you're familiar with HTML, you should be able to achieve the desired look.

For example, with Step Carousel, the HTML for a two row thumbnails interface may look something like:

<style>

div.thumbnails a{
float:left;
margin-right:5px;
}

</style>

<div class="thumbnails">
<a href="javascript:stepcarousel.stepTo('galleryb', 1)"><img src="thumb1.gif" /></a> <a href="javascript:stepcarousel.stepTo('galleryb', 2)"><img src="thumb2.gif" /></a> <a href="javascript:stepcarousel.stepTo('galleryb', 3)"><img src="thumb3.gif" /></a> <br style="clear:left" />

<a href="javascript:stepcarousel.stepTo('galleryb', 4)"><img src="thumb4.gif" /></a> <a href="javascript:stepcarousel.stepTo('galleryb', 5)"><img src="thumb5.gif" /></a> <a href="javascript:stepcarousel.stepTo('galleryb', 6)"><img src="thumb6.gif" /></a>

</div>

[Al Fresco]

Hi DD,

I am really trying to create the two or three thumb rows within the Step Carousel HTML itself not in the HTML for Carousel Viewer navigation. ie in this bit:

<div class="panel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>

<div class="panel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>

It seems to always stay inline.
I think what you have helped me with is for the navigation.
I will have another go. Thanks.