悬停画廊

Question

您好jQuery的图片交换搞到现在这个整理

一直在尝试各种不同的jQuery插件和JS全天教程努力让自己在悬停画廊像亚马逊产品页面中的图像交换，当你将鼠标悬停在缩略图，它出现在主图像上。

我不能得到任何工作，我都试过了，下面是我一直在试图代码：

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> 

我有一个图像与id目标和拇指类的锚点，为什么不是这个工作我输了:(

感谢 乔

Answer 1

要复制根据您的代码亚马逊画廊的行为，做这样的事情：

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> 

您可以修改它以适应你的口味，但这应该给出它应该如何工作的想法。

好运

注意：我添加了额外的“亮点”类，所以你可以风格，当鼠标在缩略图上（如亚马逊），得到的图像是在当前查看的指示“目标”。如果你不想要，你不需要使用它。

Answer 2

是不是缺少jQuery的启动功能？

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