Transformar galeria de imagens jquery em Javascript

Tem vários modelos de galeria de imagens na internet, mas para aprender eu queria entender duas coisas:

1 - Como eu sei qual é a nova imagem e qual é a velha no código

2 - Como trocar a imagem dentro da div container ao clicar em uma thumbnail

Achei o código Jquery que é exatamente o que eu preciso, só que eu queria transformar em javascript e não consegui por causa desses dois motivos, não sei como trocar a imagem com clique no Javascript, achei muitos tutoriais que explicam com mouseover:

http://www.livrosdomaujor.com.br/jquery/jq3/cap_12/arquivo-12.3.1c.html

//<![CDATA[

	$(document).ready(function() {
 $('.abre-fecha').hide();
 $('<div id="tela" ><img src="10.jpg" alt="Descrição da imagem" /></div>')
 .insertAfter('#galeria');
 $('.foto').click(function(event) {
 event.preventDefault();
 $('#tela img').remove();
 $('<img />')
 .attr('src', $(this).attr('src'))
 .css('opacity', '0.3')
 .appendTo('#tela')
 .animate({opacity: 1 }, 2000);
 });
	});
 // ]]>