|
Сообщение от desertFox
|
|
Как сделать чтобы при клике по большой картинке также была смена на большую картинку следующую по списку, по достижению последней переключалась на первую и так по кругу?
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>body{
margin:0;
padding:0;
font:75%/120% Arial,Helvetica,sans-serif;
}
#bigfoto img{
border:solid 1px #ccc;
width:550px;
height:400px;
padding:5px;
}
#smallfoto a{
border:solid 1px #ccc;
width:100px;
height:100px;
padding:3px;
margin:2px;
float:left;
}
#smallfoto a:hover{
border-color:#FF9900;
}
#smallfoto li{
list-style:none;
}
#smallfoto{
margin:0;
padding:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(document)
.ready(function () {
var small = $("#smallfoto li img"),
big = $("#bigfoto img");
small.each(function (i, el) {
var next = i + 1 == small.size() ? 0 : i + 1;
$(el)
.click(
function (event) {
event.preventDefault();
if(big.data("next") == next) return;
big.fadeTo(500, 0.1, function () {
big.attr({
"src": $(el)
.parent()
.attr("href")
})
.data({
"next": next
});
});
big.fadeTo(800, 1);
}
)
});
big.data({
"next": 1
})
.click(function (event) {
small.eq($(this)
.data("next"))
.click()
})
});
</script>
</head>
<body>
<div id='bigfoto'><img src='http://ru.lookatcode.com/show/7580928785829615/img2-lg.jpg' title="next"></div>
<ul id='smallfoto'>
<li><a href="http://ru.lookatcode.com/show/7580928785829615/img2-lg.jpg" title="Image 2"><img src="http://ru.lookatcode.com/show/7580928785829615/img2-thumb.jpg"></a></li>
<li><a href="http://ru.lookatcode.com/show/7580928785829615/img3-lg.jpg" title="Image 3"><img src="http://ru.lookatcode.com/show/7580928785829615/img3-thumb.jpg"></a></li>
<li><a href="http://ru.lookatcode.com/show/7580928785829615/img4-lg.jpg" title="Image 4"><img src="http://ru.lookatcode.com/show/7580928785829615/img4-thumb.jpg"></a></li>
<li><a href="http://ru.lookatcode.com/show/7580928785829615/img5-lg.jpg" title="Image 5"><img src="http://ru.lookatcode.com/show/7580928785829615/img5-thumb.jpg"></a></li>
<li><a href="http://ru.lookatcode.com/show/7580928785829615/img6-lg.jpg" title="Image 6"><img src="http://ru.lookatcode.com/show/7580928785829615/img6-thumb.jpg"></a></li>
</ul>
</body>
</html>