Vendo seu código não me parece que você está utilizando nenhum framework frontend (Bootstrap, Materializecss). Então vou tentar explicar a seguir o que você precisa fazer para implementar isso.
1) Você deverá ter duas imgs, uma para ser clickada e outra para ser posta no modal.
<!--IMG -->
<img id="img" src="...">
<!-- MODAL -->
<div id="modal">
<img id="img-modal" src="...">
</div>
2) Você deve configurar o seu CSS tanto da img que será clickada quanto do modal, isso requer um pouco de prática. Mas básicamente a lógica está em quando acontecer o evento de click o #modal será mostrado e o src da img clickada passa para a img do modal.
// Código JS
let img = document.querySelector('#img');
img.addEventListener('click', function(event){
let modal = document.querySelector('#modal');
let img-modal = document.querySelector('#img-modal');
img.setAttribute('src', event.target.src);
// No CSS o #modal deve esta com o display none.
modal.style.display = 'block';
}, false);
Se você tiver dificuldade em implementa a parte do front-end (CSS e JS) então recomendo o link abaixo.
https://www.w3schools.com/howto/howto_css_modal_images.asp
Por último, tenho uma dica de código. Prefira sempre adicionar o código PHP dentro do HTML e não o contrário.
Exemplo 1:
<div>
<!-- difícil de ler -->
<?php if ($titulo == 'alguma coisa') {
echo "<h1>". $titulo ."</h1>";
} ?>
</div>
<!-- fácil de ler -->
<?php if ($titulo == 'alguma coisa'): ?>
<h1><?= $titulo ?></h1>
<?php endif; ?>
<?
Exemplo 2:
<!-- difícil de ler -->
<?php
while($row = mysql_fetch_array($result))
{
echo '<div id="imagelist" onClick="openimg()">';
echo '<p><img src="'.$row['location'].'"></p>';
echo '<p id="caption">'.$row['caption'].' </p>';
echo '</div>';
} ?>
<!-- fácil de ler -->
<?php while($row = mysql_fetch_array($result)): ?>
<div id="imagelist" onClick="openimg()">
<p>
<img src="<?= $row['location'] ?>">
</p>
<p id="caption"><?= $row['caption'] ?></p>
</div>
<?php endwhile;
Procure sobre sintaxe alternativas com PHP e a sintaxe curta do echo.
Espero ter ajudado.