Beste SD-ers,

Even een vraagje over een slideshow die ik ga gebruiken op de site van een klant.

Ik heb hier het javascript gedeelte

Code:

<script type=\"text/javascript\">
			$(function() {
				$(\'#wrapper\').hover(
					function() {
						$(\'#carousel\').trigger( \'pause\' );
						$(\'#thumbnails\').parent().animate({
							top: 0
						});
					}, function() {
						
						$(\'#carousel\').trigger( \'play\' );
						$(\'#thumbnails\').parent().animate({
							top: 0
						});
					}
				);

				$(\'#carousel\').carouFredSel({
					scroll: {
						fx: \'crossfade\'
					},
					auto: {
						onBefore: function( oldI, newI ) {
							$(\'#thumbnails\').trigger( \'slideTo\', [ \'#thumbnails img[alt=\'+ newI.attr( \'alt\' ) +\']\', -2 ] );
						}
					}
				});

				$(\'#thumbnails\').carouFredSel({
					auto: false,
					items: {
						start: -2
					}
				});

				$(\'#thumbnails img\').click(function() {
					$(\'#thumbnails\').trigger( \'slideTo\', [ this, -2 ] );
					$(\'#carousel\').trigger( \'slideTo\', [ \'#carousel img[alt=\'+ $(this).attr( \'alt\' ) +\']\' ] );

				}).css( \'cursor\', \'pointer\' );
			});
		</script>

hier het css gedeelte

Code:

#wrapper {
	width: 501px;
	height: 344px;
	margin: -200px 0 0 -300px;
	overflow: hidden;
	position: absolute;
	left: 300px;
	top: 200px;
			}
			#carousel {
	width: 501px;
	height: 345px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 1px;
			}
			#carousel img {
				display: block;
				float: left;
			}
			#thumbnails {
	width: 245px;
	height: 345px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 501px;
	background-color: #FFFFFF;
	z-index: 1;
			}
			#thumbnails img {
				display: block;
				margin: 0px;
				width: 244px;
				height: 86px;
				
				box-shadow: 0 0 10px #000;
			}
			#thumbnails img:hover {
				width: 244px;
				height: 86px;
				margin: 0px;
			}

en hier het html gedeelte

Code:

<div id=\"wrapper\">
<div id=\"carousel\">
				<img src=\"img/large/hijsbanden.gif\" alt=\"hijsbanden\" width=\"501\" height=\"345\" />
				<img src=\"img/large/valbeveiliging.gif\" alt=\"valbeveiliginh\" width=\"501\" height=\"345\" />
				<img src=\"img/large/gereedschap.gif\" alt=\"gereedschap\" width=\"501\" height=\"345\" />
				<img src=\"img/large/harnasgordel.gif\" alt=\"harnasgordel\" width=\"501\" height=\"345\" />
	</div>
</div>
<div id=\"thumbnails\"><img src=\"tekst1.gif\" alt=\"1\" width=\"244\" height=\"86\" />
		<img src=\"tekst2.gif\" alt=\"2\" width=\"244\" height=\"86\" />
        <img src=\"tekst3.gif\" alt=\"3\" width=\"244\" height=\"86\" />
        <img src=\"tekst4.gif\" alt=\"4\" width=\"244\" height=\"86\" />
</div>
</div>

Nou is het zo dat als de slideshow standaard is boven de plaatjes afwisselen en onder 4 kleine thumbnails staan, de thumbnails wil ik echter graag aan de rechterkant, nu heb ik een stukje tekst aangepast en is het half gelukt, want inplaats van 4 thumbnails staat er nu 1 rechtsboven zie foto:

Hopelijk kan iemand mij helpen alle 4 de thumbnails onder elkaar te krijgen

Groeten Dia

als je de boel even upload kan het wat beter bekeken worden. Met dat screenshot schiet het niet op...