Multiple horizontal scroller in one page? (script issue)

[Hazeroth]

Alright, I have a little issue here, I'm not an expert so I need your help.

I have a code for an horizontal scroller (in fact I used the scroller from here: http://coolcarousels.frebsite.nl/c/28/) and I want to integrate it multiple times, here's what it looks like so far:
5050

Basically I want to put the scroller multiple times inside the page, where the red rectangles are. I know that changing the Id for each scroller is one step of the solution, the scroller uses a style sheet and a Js file. I am not an expert so I need someone to clear this up for me.

First, here is the Javascript, called "scroller.js" :


$(function() {

$('#carousel span').append('<img src="scroller/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="scroller/carousel_glare_small.png" class="glare" />');



$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 4
},
width: '155',
height: 282
}

});


$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});


});



Now here is the CSS:


html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: url('bg_glare.png') top center no-repeat;
}
html > body {
min-height: 600px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}

#wrapper {
position: absolute;
width: 50%;
left: 25%;
top: 50px;
}
#carousel-wrapper {
padding-bottom: 10px;
position: relative;
}
#carousel, #thumbs {
overflow: hidden;
}
#carousel-wrapper .caroufredsel_wrapper {
border-radius: 10px;
box-shadow: 0 0 5px #899;

}

#carousel span, #carousel img,
#thumbs a, #thumbs img {
display: block;
float: left;
height: 262px;

}
#carousel span, #carousel a,
#thumbs span, #thumbs a {
position: relative;

}
#carousel img,
#thumbs img {
border: none;
height: 262px;
position: absolute;
top: 0;
left: 0;
}
#carousel img.glare,
#thumbs img.glare {
width: 100%;
height: auto;
}

#carousel span {
width: 554px;
height: 313px;
}

#thumbs-wrapper {
padding: 20px 0px;
position: relative;
width: 780px;
}
#thumbs a {
border: 2px solid #899;
height: 262px;
width: 175px;
margin: 0 10px;
overflow: hidden;
border-radius: 10px;float: left;

-webkit-transition: border-color .5s;
-moz-transition: border-color .5s;
-ms-transition: border-color .5s;
transition: border-color .5s;
}
#thumbs a:hover, #thumbs a.selected {
border-color: #566;
}

#wrapper img#shadow {
width: 100%;
position: absolute;
bottom: 0;
}

#prev, #next {
background: transparent url('carousel_nav.png') no-repeat 0 0;
display: block;
width: 53px;
height: 120px;
margin-top: -70px;
position: absolute;
top: 50%;
}
#prev {
background-position: 0 0;
left: -20px;
}
#next {
background-position: -53px 0;
right: -20px;
}
#prev:hover {
background-position: 0 -120px;
}
#next:hover {
background-position: -53px -120px;
}
#prev.disabled, #next.disabled {
display: none !important;
}


And finally, the HTML code:


<div id="thumbs-wrapper">
<div id="thumbs">
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" alt="Defiance" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
<a href="<?php bloginfo('template_directory');?>/movie.html" rel="ajaxpanel"><img src="http://img825.imageshack.us/img825/2360/posterst.png" /></a>
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>

[jscheuer1]

You need unique ids for each thing that's addressed by its id. Or you could rewrite the script to use class for some things.

Basically, what you have there is a simple script that's more or less one dimensional, meant for a single use on a page. To use it more than once, you can either make another copy of it, its styles and its markup only using a different set of id's, say add a 2 to the end of each id, Or rewrite it to use the id's that you feed it, using class instead of id wherever possible to save duplication - from the looks of it, that would be in the css and markup. The script would likely still need unique id's for it's functions.

Or, you could find a script that already does all that. Something like:

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

or:

http://dev7studios.com/nivo-slider/

There are many others.

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.