将图像和描述加载到叠加层(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.

展开翻译

译文

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

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

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

duanjiang7505
duanjiang7505 designcouch.com/home/why/2013/11/01/...适用于HTML和CSS中的灯箱。
5 个月之前 回复
doukun1450
doukun1450 问题不在于灯箱,就像将文字添加到灯箱图片一样,这就是我被困住的地方。
5 个月之前 回复
dsf22567
dsf22567 它的想法相同,最初加载一个用作缩略图的小图像,数据src标签被视为大尺寸或原始尺寸,并在点击时加载
5 个月之前 回复
dongya1875
dongya1875 fancyapps.com/fancybox/3
5 个月之前 回复
doubu5154
doubu5154 如果你可以帮忙的话,不要自己卷起来,它只需要花费更多的时间,使用现有的,如fancybox之类的
5 个月之前 回复

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

展开翻译

译文



如果您使用类似 https://lokeshdhakar.com/projects/lightbox2/#getting-started 这应该相当容易。</ p>

您的PHP代码看起来像 这个:</ p>

 &lt;?php 
$ photos = [1000,1001];
foreach($ photos as $ photo){
$ description = file_get_contents('desc /'。$ photo。'.jpg');
echo'&lt; a href =“images /'。$ photo。'”data-lightbox =“roadtrip”data-title =“'。$ description。'” &GT;” 。 $ photo。 '&lt; / a&gt;';
}
?&gt;
</ code> </ pre>
</ div>

douwu8251
douwu8251 是的,我刚回来时带着“do”
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!