jQuery用于从数据库动态生成的缩略图库

Question

我有一个从数据库动态生成的缩略图库。我需要能够在div中显示缩略图的大版本，该div将在屏幕中间弹出，页面的其余部分在后台淡出。

<div id="thumbs">
   //some code goes here
   echo "<td style='width:200px; height:150px;'><a href='#'><img id='thumbnailImage'                 src='$url' width='200px' height='150px' border='0px'></a></td></tr>";
</div> // end of thumbs div

大图像的div

<div id="popup_content"> 
    <img  id="largeImage" src='' alt='this is the large image' />            
</div> 

在我的jQuery中，我有以下代码：

 $("#thumbnails img").click(function() {
$('#largeImage').attr('src',$('#thumbnailImage').attr('src').replace('thumbnail','large'));

 }

弹出式div在点击缩略图时起作用，但总是显示页面上第一个缩略图的第一个大图像。

任何想法

Answer 1

这是怎么回事？

$("#thumbnails img").click(function() {
    $('#largeImage').attr('src',$(this).attr('src').replace('thumbnail','large'));
}