Доброго времени суток всем форумчанам. Я совсем нуб в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, открывая фотографию в полный размер, в новом окошке. В окошке есть две кнопки "вперед" и "назад". При клике по кнопкам срабатывает скроллинг миниатюр, а нужно сделать что бы менялись фотографии полного размера. Как такого добиться? Я уже себе всю голову сломал. Помогите пожалуйста.
