Смена при клике "src" текущей на "href" следующей из списка
Приветствую.
Есть мини фото галерея, работает с применением библиотеки jQuery. html: <div id='bigfoto'><img src='http//..большая картинка..'></div> <ul id='smallfoto'> <li><a href='http..большая картинка..'><img src='http//..маленькая..'></a></li> <li><a href='http..большая картинка..'><img src='http//..маленькая..'></a></li> <li><a href='http..большая картинка..'><img src='http//..маленькая..'></a></li> </ul> При клики на превьюшки в блоке #smallfoto в блоке #bigfoto открывается большая картинка Как сделать чтобы при клике по большой картинке также была смена на большую картинку следующую по списку, по достижению последней переключалась на первую и так по кругу? вот пока такое решение:
$('#bigfoto img').click(function() {
var countImg = $('#smallfoto li a').length;
if (countImg > 1) {
if ($('#smallfoto li a').attr('href') == $(this).attr('src')) {
$(this).hide().attr('src',$('#smallfoto li a').parent('li').next().find('a').attr('href'));
$(this).load(function() {
$(this).fadeIn(1000);
});
}
}
imgSmall.fadeTo(500,1);
});
это не работает так как нужно, меняется только на вторую по списку и переключения дальше нет |
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>
|
круто, благодарю, поставил Ваш код,
при нажатии на маленькие картинки у меня был такой код:
$(document).ready(function() {
var imgBig = $('#bigfoto img');
imgSmall = $('#smallfoto li a');
imgSmall.click(function(event) {
event.preventDefault();
if (imgBig.attr('src') != $(this).attr('href')) {
imgBig.hide().attr('src',$(this).attr('href'));
imgBig.load(function() {
$(this).fadeIn(1000);
});
}
imgSmall.fadeTo(500,1);
$(this).fadeTo(500,0.6);
});
});
|
а куда условие вставить чтобы при повторном клике на одну и туже превьюшку снова не грузилась большая фотка? по идеи она уже загружена и при повторном клике зачем её снова грузить
|
Цитата:
|
благодарю, то что хотел
как быстро ответили, не ожидал если честно |
время анимации в 55 строке небыло проставлено. :thanks:
|
Цитата:
|
| Часовой пояс GMT +3, время: 03:16. |