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:


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/dynamici...epcarousel.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.