php - 将图像和描述加载到叠加层中 (HTML/CSS/PHP)

Question

我有一个缩略图网格，当我点击它时，我想在页面上加载一个叠加层，显示全尺寸图像和文本文件的内容作为标题。

有点像 <a href="images/1001.jpg"><image src="thumbs/1001.jpg"></a>只会加载图像，但我想在灯箱 View 中加载图像，并将内容加载到“desc/1001.txt”到图像下方的标题(不一定是 <caption>)中。

如果可以避免，我不希望它重新加载页面。如果有帮助，图像、缩略图和描述都符合上面的模式，或者我还有一个格式为 1000,"Description of the picture" 的 CSV 文件。如果那更简单。

Answer 1

如果你使用类似 https://lokeshdhakar.com/projects/lightbox2/#getting-started 的东西这应该相当容易。

您的 PHP 代码看起来像这样:

<?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>';
}
?>