Если, то (СРОЧНО!!!)
Здравствуйте и доброго времени суток друзья! Срочно нужна Ваша помощь!)
Задача такая: Предположим, что есть 2 маленькие картинки и 2 большие. Нужно, чтобы при наведение на 1-ую маленькую картинку, изменялась 1-ая большая картинка. Вот какой код у меня получился в итоге:
<script>
$(document).ready(function() {
$(".img-small li").hover(function() {
$(".img-small li.active").removeClass("active");
$(this).addClass("active");
});
$(".img-big li").ready(function() {
if ($(".img-small li").is(".active")) {
$(".img-big li").addClass("active");
}
});
</script>
<style>
#img-main .active {border:1px solid black;}
#img-main li {float:left;list-style-type:none;cursor:pointer;}
</style>
<div id='img-main'> <ul class="img-big"> <li><img src="/netcat_files/10/2/1023423_1_thumb1.jpeg"></li> <li><img src="/netcat_files/10/2/1038141_1_thumb1.jpeg"></li> </ul> <div class='clear'></div> <ul class="img-small"> <li class='active'><img src="/netcat_files/10/2/1023423_1_thumb1.jpeg" style="width:50px"></li> <li><img src="/netcat_files/10/2/1038141_1_thumb1.jpeg" style="width:50px"></li> </ul> </div> Наведение "hover" работает, а вот изменение 1-ой большой картинки, при наведение на 1-ую маленькую, нет. Спасибо!) |
Цитата:
|
Цитата:
|
Вот потому, я прошу помощи у Вас) Как нужно изменить код, чтобы работало?)
|
Т.е. просто написать его за тебя?
|
raindew,
:cray: :cray: :cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#img-main .active {border:5px solid black;}
#img-main li {float:left;list-style-type:none;cursor:pointer;}
.img-small img{width: 50px;}
.img-big img{width: 150px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(document)
.ready(function () {
var small = $(".img-small li img"),
big = $(".img-big li img");
small.each(function (indx, element) {
$(element).hover(
function () {
small.add(big).removeClass("active");
$(element).add(big.eq(indx)).addClass("active");
},
function () {
small.add(big).removeClass("active");
}
)
});
});
</script>
</head>
<body>
<div id='img-main'>
<ul class="img-big">
<li><img src="http://ru.lookatcode.com/show/7580928785829615/img2-lg.jpg"></li>
<li><img src="http://ru.lookatcode.com/show/7580928785829615/img3-lg.jpg"></li>
</ul>
<div class='clear'></div>
<ul class="img-small">
<li><img src="http://ru.lookatcode.com/show/7580928785829615/img2-thumb.jpg" ></li>
<li><img src="http://ru.lookatcode.com/show/7580928785829615/img3-thumb.jpg" ></li>
</ul>
</div>
</body>
</html>
|
Рони!) Премного благодарен Вам!!!) Нажал плюсик в Вашу карму) ksa, да, именно этого мне и не хватало, я не программист, но столкнулся с такой проблемой.
|
И вновь меня преследует только уже иная проблема) http://stylish-cherries.ru/catalog/women/ - сайт, где я внедрил данный скрипт. Вот такой вот он у меня получился в итоге:
$(document).ready(function () {
var small = $(".invis-block div"),
big = $(".block div");
small.each(function (indx, element) {
$(element).hover(
function () {
small.add(big).removeClass("active");
$(element).add(big.eq(indx)).addClass("active");
}
)
});
});
Проблема заключается в том, что при наведение на любую маленькую (small) картинку в следующем блоке, active слитает. |
raindew,
у вас структура более расширенная нужен дополнительный each в начале по блокам <div class="object"> и id это уникальный идентификатор а у вас много одинаковых id на одной странице - это данному скрипту не мешает но могут быть проблемы. если есть заинтересованность ваши предложения в личку дописать скрипт не проблема. |
| Часовой пояс GMT +3, время: 01:25. |