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



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

类似的东西 <a href="images/1001.jpg"><image src="thumbs/1001.jpg"></a>只会加载图像,但我想在灯箱类型的视图中加载图像,并将内容加载到"desc/1001.txt"到图像下方的标题(不一定是<caption>(中。

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

如果你使用类似 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>';
}
?>

最新更新