Afficher une image grand format au clic d'une vignette

Bonjour,

sur ma page j'ai plusieurs petites images.
lorsque je clique sur une petite image je veux afficher cette même image en plus grand.

<div id="img2018" class="photos2018">
	<p >
		Cliquez sur une photo pour l'agrandir<br />
		Afficher le diaporama manuel
	</p>
	<p>
		<img src="images/rencontres/2018/20180420_194536.jpg" class="imgpm" onclick="showImg('20180420_194536.jpg');" alt="" />
		<img src="images/rencontres/2018/20180420_195526.jpg" class="imgpm" onclick="showImg('20180420_195526.jpg');" alt="" />
....
	</p>
</div>
<div id="imggm2018" class="photos2018gm">
	<p style="text-align:center;">Cliquer pour fermer</p>
		
</div>

le code javascript

function showImg1(id){
/*alert(id);*/
	document.getElementById("img2018").style.display = "none";
	document.getElementById("imggm2018").style.display = "inline";
	document.getElementById("imggm2018").style.whidth = "71%";
	document.getElementById("imggm2018").src="images/rencontres/2018/"+id;
}

le code css

.photos2018 { text-align:center; background-color:#FFFFFF; }
.photos2018gm { text-align:center; background-color:#FFFFFF; display:none; }

j'entre bien dans la fonction car la div qui contient les vignettes est bien cachée et celle qui reçoit l'image en grand format apparaît mais sans l'image !!
merci d'avance