jquery - Changing an image when clicking a thumbnail, with multiple instances on one page -

i trying create page has several instances of large images smaller thumbnails.

i want make when user clicks on thumbnail large image in parent div of thumbnail large version of thumbnail.

i know how make happen if there 1 instance of on page, i'm having trouble multiple instances.

here code have far:

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'));     }) }); 

this bind function on onclick event of each image src attribute contains string small , proceed change of large image's source, sibling of the parent div, when thumbnail clicked:

javascript/jquery

$.each($('img'), function () {     if ($(this).attr('src').tostring().indexof('small.jpg') > -1) {         $(this).on('click', function () {             console.log("test");             $(this).parent('div').siblings('img').attr('src', $(this).attr('src').replace('small', 'large'));         });     } }); 

live demo