Обмен изображениями Jquery при наведении Галерея

Привет, теперь разобрался

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

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

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>

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

Спасибо Джо


image jquery hover swap jquery-hover
person Joseph    schedule 05.06.2011    source источник
comment
У вас есть несколько элементов с одним и тем же id. Это неверно; id должен быть уникальным в пределах документа. Кроме того, в каком элементе вы хотите показывать изображения при наведении курсора?   -  person David says reinstate Monica    schedule 06.06.2011
comment
Привет, Дэвид, это была ошибка тюпинга, лол :)   -  person Joseph    schedule 06.06.2011

Ответы (2)


arrow_upward
2
arrow_downward

Разве не отсутствует функция запуска jQuery?

$(document).ready(function(){
/* put the code here */
});
person msmafra    schedule 06.06.2011

arrow_upward
0
arrow_downward

Чтобы дублировать поведение галереи 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), чтобы указать, какое изображение в настоящее время просматривается в "цели". Вам не нужно использовать его, если вы не хотите.

person Mouhannad    schedule 05.06.2011
comment
Привет, спасибо за ваш код, однако он все еще не работает, теперь у меня есть новый код в главном вопросе, если у вас есть время, не могли бы вы взглянуть на меня, спасибо, Джо - person Joseph; 06.06.2011