wat gaat hier mis?

Hoi!
Ik ben nu een tijdje aan het klooien met een image gallery. Ik heb een tooltje ontdekt waarmee ik AI kan gebruiken om de code te genereren waarna ik het e.e.a. kan aanpassen om het naar wens te maken. Ik ben een eind gekomen, alle probeersels gingen goed, maar met de gallery gaat het niet en ik zie niet wat er nu misgaat. Het lijkt allemaal goed te staan.

Slag om de arm, ik ben lang geleden webdesigner geweest maar werkte op de afdeling met programmeurs. Ik heb dus wel wat inzicht als het gaat om de code maar ben (nog) absoluut geen programmeur. Het ligt dus ongetwijfeld aan mij(n code) maar wil graag leren.

Kan iemand me vertellen wat hier misgaat?
Mvg Mark

PS: PHP staat aan op de server


www.markpaulussen.com/test2
---------------------------------
php
--------------------------------
<?php
$thumbnailDir = 'thumbnails';
$fullSizeDir = 'fullsize';
$images = array_diff(scandir($thumbnailDir), array('..', '.'));

// Sort the files by natural order and in descending order to show newest first
usort($images, function($a, $b) {
return strnatcmp($b, $a); // Reverse order
});

foreach ($images as $image) {
// Assuming file names are the same in both directories
$fullImagePath = $fullSizeDir . '/' . $image;
$thumbnailPath = $thumbnailDir . '/' . $image;
echo '<div class="thumbnail">';
echo '<img src="' . $thumbnailPath . '" alt="Thumbnail of ' . $image . '" onclick="openPopup(\'' . $fullImagePath . '\')" />';
echo '</div>';
}
?>

---------------------------------
javascript
---------------------------------
function openPopup(fullImagePath) {
const popup = document.getElementById('popup');
const popupImg = document.getElementById('popup-img');
popup.style.display = 'flex'; // Use 'flex' to center the image
popupImg.src = fullImagePath;
}

function closePopup() {
const popup = document.getElementById('popup');
if (event.target === popup) {
popup.style.display = 'none';
}
}

window.onclick = closePopup;