Javascript-форум - скроллинг фотографий.

Доброго времени суток всем форумчанам. Я совсем нуб вJQuery Помогите пожалуйста разобраться. Имеется вот такой код:

<link href="scroller.css" rel="stylesheet" type="text/css">
<script src="js/jquery.tools.min.js" type="text/javascript"> </script>
  <div class="foto">
<p>Производство.</p>
<div class="scrollable" id="chained">  
   <div class="items">   
      <!-- 1-4 -->
      <div id="triggers">
         <img src="img/thumbs/thumb_1.jpg" rel="#IMG_7662"/>
         <img src="img/thumbs/thumb_2.jpg" rel="#IMG_7667"/>
         <img src="img/thumbs/thumb_3.jpg" rel="#IMG_7668"/>
         <img src="img/thumbs/thumb_4.jpg" rel="#IMG_7669"/>       
      </div>     
      <!-- 4-8 -->
      <div id="triggers">
         <img src="img/thumbs/thumb_5.jpg" rel="#IMG_7682"/>
         <img src="img/thumbs/thumb_6.jpg" rel="#IMG_7685"/>
         <img src="img/thumbs/thumb_7.jpg" rel="#IMG_7686"/>
         <img src="img/thumbs/thumb_8.jpg" rel="#IMG_7677"/>
      </div>      
   </div>
</div>
<div id="images">
<div class="apple_overlay black" id="IMG_7662">
	<img id="fumg" src="img/full/1.jpg" />
	<div class="details">
		<h2>*************</h2>
		<p>
			*************
		</p>
	</div>
    <div class="navi prev"></div>
	<div class="navi next"></div>
</div>
<div class="apple_overlay black" id="IMG_7667">
	<img id="fumg" src="img/full/2.jpg" />
	<div class="details">
		<h2>*************</h2>
		<p>
			*************
		</p>
	</div>
	<div class="navi prev"></div>
	<div class="navi next"></div>
</div>
<div class="apple_overlay black" id="IMG_7668">
	<img id="fumg" src="img/full/3.jpg" />
	<div class="details">
		<h2>*************</h2>
		<p>
			*************
		</p>
	</div>
	<div class="navi prev"></div>
	<div class="navi next"></div>
</div>
<div class="apple_overlay black" id="IMG_7669">
	<img id="fumg" src="img/full/4.jpg" />
	<div class="details">
		<h2>*************</h2>
		<p>
			*************
		</p>
	</div>
	<div class="navi prev"></div>
	<div class="navi next"></div>
</div>
<div class="apple_overlay black" id="IMG_7682">
	<img id="fumg" src="img/full/5.jpg" />
	<div class="details">
		<h2>*************</h2>
		<p>
			*************
		</p>
	</div>
	<div class="navi prev"></div>
	<div class="navi next"></div>
</div>
<div class="apple_overlay black" id="IMG_7685">
	<img id="fumg" src="img/full/6.jpg" />

	<div class="details">
		<h2>*************</h2>
		<p>
			*************
		</p>
	</div>
	<div class="navi prev"></div>
	<div class="navi next"></div>
</div>
<div class="apple_overlay black" id="IMG_7686">
	<img id="fumg" src="img/full/7.jpg" />
	<div class="details">
		<h2>*************</h2>
		<p>
			*************
		</p>
	</div>
	<div class="navi prev"></div>
	<div class="navi next"></div>
</div>
<div class="apple_overlay black" id="IMG_7677">
	<img id="fumg" src="img/full/8.jpg" />
	<div class="details">
	  <h2>*************</h2>
		<p>
			*************
		</p>
	</div>
	<div class="navi prev"></div>
	<div class="navi next"></div>
</div>
</div>
<!-- javascript coding -->

<script>
$(document).ready(function() {
$("#chained").scrollable({circular: true, mousewheel: true}).autoscroll({interval: 3000});	
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>
</div>
<br clear="all" />

Ну и CSS:

.foto {
	width:95%;
	margin:0 auto;
	height:120px;
	background-color:#ff058b;
        color:#fff;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-rdius: 10px;
	border-radius: 10px;
}
.foto p {
        font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
        font-weight:bold;
	font-style:italic;
	padding: 0;
	margin: 0;
	text-align:center;
}
.details p  {
        padding: 0;
	margin: 0;
	text-align:left;
}

.details h2  {
        padding: 0;
	margin: 0;
	text-align:left;
}

.scrollable {
	position:relative;
	overflow:hidden;
	width: 90%;
	height:87px;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	padding-top:5px;
}

.scrollable .items {
	width:1000%;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:10%;
	padding-left:0.6%;
}
.scrollable img {
	float:left;
	margin:auto;
	background-color:#fff;
	padding:5px;
	border:1px solid #ff058b;
	width:20%;
	height:75px;
	cursor:pointer;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
}

.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}
div.apple_overlay.black {
	background-image:url(img/transparent1.png);
	color:#fff;
}

.apple_overlay {
	display:none;
	width:600px;		
	padding:45px;	
	font-size:14px;
}
.apple_overlay .close {
	background-image:url(img/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

.btns {
	width:100px;
	height:35px;
	margin:0 auto;
}

.navi {
	background-image:url(img/hori_large.png);
	width:30px;
	height:30px;
	float:left;
	margin-top:5px;
    margin-bottom:15px;
}

.navi.next {
	margin-left:25px;
}

.navi:hover  		{ background-position:-30px 0; }
.navi:active  		{ background-position:-60px 0; }
.next 				{ background-position: 0 -30px;}
.next:hover 			{ background-position:-30px -30px; }
.next:active 		{ background-position:-60px -30px; }

В общем получается автоматический, зацикленный скроллинг миниатюр фотографий, по четыре штуки. При клике на какую либо из миниатюр, срабатывает эффект overlay, открывая фотографию в полный размер, в новом окошке. В окошке есть две кнопки "вперед" и "назад". При клике по кнопкам срабатывает скроллинг миниатюр, а нужно сделать что бы менялись фотографии полного размера. Как такого добиться? Я уже себе всю голову сломал. Помогите пожалуйста.