- 将图像和描述加载到叠加层（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 designcouch.com/home/why/2013/11/01/...适用于HTML和CSS中的灯箱。
- 5 个月之前 回复
-
- doukun1450 问题不在于灯箱，就像将文字添加到灯箱图片一样，这就是我被困住的地方。
- 5 个月之前 回复
-
- dongya1875 fancyapps.com/fancybox/3
- 5 个月之前 回复
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>