用jquery改变图像

Question

我喜欢这个网站的布局方式http://www.templerinteriors.co.nz/what-weve-done/kitchens/kitchen-gallery-c/但我想知道的是什么是最好的方式来让内容改变，当一个图像被点击底部和大图像显示作为刚才点击的那个。

Answer 1

假设您已将所有缩略图放在无序列表中，并给出了称为“缩略图”的ID。然后，您在每次点击拇指后将一个ID添加到您想要替换的大图像中，并将其命名为“galleryBig”。

<img id="galleryBig" src="images/gallery/large/01.jpg" /> 
<ul id="thumbnails"> 
    <li><a href="images/gallery/large/01.jpg" target="_blank"><img src="images/gallery/thumb/01.jpg" /></a></li> 
    <li><a href="images/gallery/large/02.jpg" target="_blank"><img src="images/gallery/thumb/02.jpg" /></a></li> 
</ul> 

然后，所有你需要补充的是下面的jQuery代码

$("li a", "#thumbnails").click(function(event) { 
    event.preventDefault(); 
    var nameIMG = $(this).attr("href"); 
    $("#galleryBig").attr("src", nameIMG); 
}); 

你为什么要坚持增加一个标签的缩略图和使用目标_blank的原因是为了让人们没有javascript使用画廊也。

如果你想要的东西多一点先进，更好看（淡入淡出效果），那么你可能要检查了这一点：stackoverflow - basic jQuery Gallery
，然后向下滚动到我的回答（带有绿色的“嘀”旁边它）

希望帮助:)

Answer 2

使用jQuery，如果你有你的id为“main_img”主图像，你可以做这样的事情：

$("img").click(function(){ 
    $("#main_img").prop("src", $(this).prop("src")); 
}) 

这取代了主图像的src与图像的src点击。