Блог

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

Весь день пробовал все различные плагины 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>
  

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

Спасибо, Джо

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

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

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

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