dongtuan5367
2019-06-21 01:14
浏览 68
已采纳

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

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.

图片转代码服务由CSDN问答提供 功能建议

我有一个缩略图网格,点击时我想在页面上加载一个覆盖图,显示完整尺寸的图像 以及文本文件的内容作为标题。

类似 &lt; a href =“images / 1001.jpg”&gt;&lt; image src =“thumbs /1001.jpg"></a> 只会加载图片,但我想在灯箱的视图中加载图片,并将内容加载到“desc / 1001.txt”进入 图片下方的标题(不一定是&lt; caption&gt; )。

如果可以避免,我不希望它重新加载页面。 如果它有帮助,图像,缩略图和描述都与上面的模式匹配,或者我也有一个CSV文件,格式为 1000,“图片说明”,如果这更简单。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doucheng1891 2019-06-21 04:36
    已采纳

    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>';
    }
    ?>
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题