将图像和描述加载到叠加层（HTML / CSS / PHP）

Question

I have a grid of thumbnails that when clicked on I want to load an overlay on the page showing the full size image and the contents of a text file as a caption.

Something like <a href="images/1001.jpg"><image src="thumbs/1001.jpg"></a> would just load the image, but I want to load the image in a light box sort of view and also load the contents to "desc/1001.txt" into a caption (not necessarily a <caption>) below the image.

I don't want it to reload the page if that can be avoided. If it helps, the images, thumbnails, and description all match the pattern above, or I also have a CSV file in the format of 1000,"Description of the picture" if that is simpler.

Answer 1

If you use something like https://lokeshdhakar.com/projects/lightbox2/#getting-started this should be fairly easy.

Your PHP code would look something like this:

<?php
$photos = [1000,1001];
foreach ($photos as $photo) {
    $description = file_get_contents('desc/' . $photo . '.jpg');
    echo '<a href="images/' . $photo . '" data-lightbox="roadtrip" data-title="' . $description . '">' . $photo . '</a>';
}
?>