Jquery Image своп на наведении галереи - PullRequest
Новая
       42

Jquery Image своп на наведении галереи

0 голосов
/ 06 июня 2011

Привет! Получил это отсортировано сейчас

Весь день пробовал все разные плагины JQuery и учебники по JS, пытаясь переключить изображение в галерее при наведении, как на странице продукта amazons, когда вы наводите курсор мыши на миниатюрувверх по основному изображению.

Я не могу заставить работать то, что я пробовал, ниже приведен код, который я пробовал:

html (отредактировано) 

<div><img id="target" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" /></div>

<div class="left" id="dkProductImage">
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" class="thumb lightbox highlight"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-1-500x500.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-5-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-5-74x74.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-4-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-4-74x74.jpg" width="100" height="100"></a>
   <a rel="lightbox" title="Jessica Rabbit Original" href="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-3-74x74.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="http://devilishkiss.com/image/cache/data/n6123-jessica_rabbit_original_lj-3-74x74.jpg" width="100" height="100"></a>
</div>

js (отредактировано) 

<script language="javascript" type="text/javascript">
$("a.thumb").hover(function() {
   $(this).addClass('highlight')
          .siblings('a.highlight')
              .removeClass('highlight');
   $('#target').attr('src', this.href);
});
</script>

У меня есть изображение с целевым идентификатором и привязкой с классом большого пальца, почему эта работа не потеряна: (

Спасибо, Джо

Ответы [ 2 ]

2 голосов
/ 06 июня 2011

Не пропущена ли функция запуска jQuery? 

$(document).ready(function(){
/* put the code here */
});
0 голосов
/ 06 июня 2011

Чтобы дублировать поведение галереи Amazon на основе вашего кода, сделайте что-то вроде этого:

html 

<div><img id="target" src="image1.jpg" /></div>

<div class="left" id="dkProductImage">
    <a rel="lightbox" title="Jessica Rabbit Original" href="image1.jpg" class="thumb lightbox highlight"><img alt="Jessica Rabbit Original" src="image1_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image2.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image2_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image3.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image3_thumb.jpg"></a>
    <a rel="lightbox" title="Jessica Rabbit Original" href="image4.jpg" class="thumb lightbox"><img alt="Jessica Rabbit Original" src="image4_thumb.jpg"></a>
</div>

js 

<script language="javascript" type="text/javascript">
   $("a.thumb").hover(function() {
       $(this).addClass('highlight')
              .siblings('a.highlight')
                  .removeClass('highlight');
       $('#target').attr('src', this.href);
   });
</script>

Вы можете изменитьэто на ваш вкус, но это должно дать представление о том, как это должно работать.

Удачи

Примечание : я добавил дополнительный класс «highlight», чтобы вы моглистиль, когда мышь находится над миниатюрой (например, Amazon), чтобы указать, какое изображение в данный момент просматривается в «цели».Вам не нужно использовать его, если вы не хотите.

...