jquery - 1 ページに複数のインスタンスがあるサムネイルをクリックしたときに画像を変更する

Question

小さなサムネイルを持つ大きな画像のインスタンスがいくつかあるページを作成しようとしています。

ユーザーがサムネイルをクリックすると、サムネイルの親divの大きな画像がサムネイルの大きなバージョンになるようにしたいと思います。

ページにこれのインスタンスが 1 つしかない場合にこれを実現する方法は知っていますが、複数のインスタンスで問題が発生しています。

これが私がこれまでに持っているコードです:

HTML

<div>
<img src="upload/1374000286_large.jpg" />
    <div class="thumbnails" >
        <img src="upload/1374000286_small.jpg" />
        <img src="upload/1374000773_small.jpg" />
    </div>
</div>

JQuery

$('.thumbnails').click(function(){
    $(this).attr('src',$(this).attr('src').replace('small','large'));
    })
});