Форум

raindew · #1 (**permalink**) 29.08.2013, 14:15

Здравствуйте и доброго времени суток друзья! Срочно нужна Ваша помощь!)
Задача такая:
Предположим, что есть 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-ую маленькую, нет. Спасибо!)

ksa · #2 (**permalink**) 29.08.2013, 14:32

Сообщение от raindew

Наведение "hover" работает, а вот изменение 1-ой большой картинки, при наведение на 1-ую маленькую, нет.

Так ты ничего не делаешь с большой картинкой при наведении на маленькую... Т.ч. и "работать" т.с. нечему.

рони · #3 (**permalink**) 29.08.2013, 14:47

Сообщение от raindew

$(".img-big li").ready

вот это ready зачема?

raindew · #4 (**permalink**) 29.08.2013, 14:52

Вот потому, я прошу помощи у Вас) Как нужно изменить код, чтобы работало?)

ksa · #5 (**permalink**) 29.08.2013, 15:38

Т.е. просто написать его за тебя?

рони · #6 (**permalink**) 29.08.2013, 15:51

raindew,

<!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>

raindew · #7 (**permalink**) 29.08.2013, 16:02

Рони!) Премного благодарен Вам!!!) Нажал плюсик в Вашу карму) ksa, да, именно этого мне и не хватало, я не программист, но столкнулся с такой проблемой.

raindew · #8 (**permalink**) 30.08.2013, 11:31

И вновь меня преследует только уже иная проблема) 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 слитает.

рони · #9 (**permalink**) 30.08.2013, 13:25

raindew,
у вас структура более расширенная нужен дополнительный each в начале по блокам <div class="object"> и id это уникальный идентификатор а у вас много одинаковых id на одной странице - это данному скрипту не мешает но могут быть проблемы.
если есть заинтересованность ваши предложения в личку дописать скрипт не проблема.

Форум

Справочник

Discord чат

Курсы javascript