Having trouble with a simple jQuery image loader

Question

I am trying to implement a simple script of image thumbnails, that when clicked, display a larger image.

I am trying to do this without using an existing plugin.

Here is my current code.

$('#thumbnails ul li').click(function() {
$('#main').attr('src', $(this).attr('src').replace('small/', 'large/'));});​

Can someone please let me know what I am doing wrong? I have also upload the whole code here... http://jsfiddle.net/PjrFe/

Thanks in advance guys.

Answer 1

sure :) this should do the trick:

http://jsfiddle.net/PjrFe/18/

Answer 2

that's because you're checking attr 'src' of clicked li; try this:

$('#thumbnails ul li').click(function() {
   $('#main').attr('src', $(this).find('img').attr('src').replace('small/', 'large/'));
});