jQuery for gallery of thumbnails that is generated dynamically from the database

Question

I am having a gallery of thumbnails that are generated dynamically from the database. I need to be able to show a large version of the thumbnail in a div that will popup in the middle of the screen with the rest of the page faded on the background.

<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

The div for the large image

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

and in my jQuery,I have the following code:

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

 }

The popup div works upon the clicking on the thumbnail, but alway it shows the first large image of the first thumbnail on the page.

Any idea

Answer 1

How is this?

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