jQuery图片更改 - 图库视图

Question

我在下面的无序列表中点击其中一个缩略图时需要更改的图库中有一个大图。图像是动态传入的，所以jquery脚本需要能够取得缩略图的src，从文件名中删除“-thumb”，然后用新的源代替大图。

请让我知道什么是我最好的方法来这样的画廊。

在此先感谢。

-B

Answer 1

喜欢的东西：

$('img.thumb').click(function() { 
    var src = $(this).attr('src'); 
    $('#bigImage').attr('src', src.replace(/-thumb/,'')); 
}); 

下面的例子适用，如果你的拇指正在通过AJAX加载：

（1）使用Events/live：

$('img.thumb').live("click", function() { 
    var src = $(this).attr('src'); 
    $('#bigImage').attr('src', src.replace(/-thumb/,'')); 
}); 

（2）作为jQuery的ajax方法之一的回调（例如）：

function initThumbs() 
{ 
    $('img.thumb').click(function() { 
     var src = $(this).attr('src'); 
     $('#bigImage').attr('src', src.replace(/-thumb/,'')); 
    }); 
} 

$('#thumbsDiv').load('thumbs.php?p=2', initThumbs); 

Answer 2

karim79的回答可能会稍微缩短：

$('img.thumb').click(function() { 
    $('#bigImage').attr('src', $(this).attr('src').replace(/-thumb/,'')); 
}); 

但除此之外，好答案！

Answer 3

唯一除了karim79的是：

的情况下的缩略图都放在同一个父内结合在该一方的事件会更好（？优雅）的解决方案，对所有的缩略图结合事件。该事件会传播，因此您可以通过检查事件目标来查找缩略图。

Answer 4

$().ready(function() { 

    //get all images from unordered list and apply click function 
    $('ul#myList img').each(function() { 
     $(this).click(function() { 
      $('#mainImage').attr('src', $(this).attr('src').replace('-thumb', '')); 
     }); 
    }); 

});