我尝试用 2 张图像动态填充 HTML 页面，第一个是完整图像，第二个是缩小图像，但我不能用 foreach 做 AND。
事实上，代码还可以，但我想用同一文件夹的两张图片填充我的 HTML;但是这段代码会带回所有图片，它并没有完整图像和缩略图之间的差异。
脚本带回所有图片。我的文件夹包含具有特定标题的图像：
Full Image = *.jpeg
Thumbnail = *_Low.jpeg
我希望能够修改我的代码以在第一行插入完整内容，在第二行插入缩略图。
<?php
$dir = './style/images/art/mairie/';
$files = scandir($dir);
$images = array();
array().sort();
$nb = 1;
foreach($files as $file) {
if(fnmatch('*.jpg',$file)) {
$images[] = $file;
}
}
var_dump($images);
foreach ($images as $image) {
echo '<div class="cbp-item">'.'<a class="cbp-caption fancybox-media" data-rel="portfolio" href="style/images/art/mairie/'.$image.'">'."n"
.'<div class="cbp-caption-defaultWrap">'.'<img src="style/images/art/mairie/'.$image.'" alt="" /> </div>'."n"
.'<div class="cbp-caption-activeWrap">'."n"
.'<div class="cbp-l-caption-alignCenter">'."n"
.'<div class="cbp-l-caption-body">'."n"
.'<div class="cbp-l-caption-title"><span class="cbp-plus">'.'</span></div>'."n"
.'</div>'."n"
.'</div>'."n"
.'</div>'."n"
.'<!--/.cbp-caption-activeWrap --> '."n"
.'</a> </div>'."n";
}
?>
对于第二行，我想带回缩小的照片，所以有
<div class="cbp-caption-defaultWrap"><img
src="style/images/art/mairie/Maurine_Tric-7399_Low.jpg" alt="" />
</div>
$images
我的$images数组的一部分如下所示：
$images = [
"0" => "Maurine_Tric-7399.jpg",
"1" => "Maurine_Tric-7399_Low.jpg",
"2" => "Maurine_Tric-7407.jpg",
"3" => "Maurine_Tric-7407_Low.jpg",
"4" => "Maurine_Tric-7414.jpg",
"5" => "Maurine_Tric-7414_Low.jpg",
];
期望的输出
我正在尝试在我的数组中添加一个带有大图像的 URL，另一个带有缩略图的 URL，这些缩略图与 _Low 区分开来：
<div class="cbp-item"><a class="cbp-caption fancybox-media" data-rel="portfolio" href="style/images/art/mairie/Maurine_Tric-7399.jpg"> <div class="cbp-caption-defaultWrap"><img src="style/images/art/mairie/Maurine_Tric-7399_Low.jpg" alt="" /> </div>
只需使用 preg_match(( 而不是 fnmatch((，仅匹配拇指甲图像并将_Low.jpg之前的部分标记为子模式。然后，您可以轻松地从该存根构造两个图像的文件名：
<?php
$dir = './style/images/art/mairie/';
$files = scandir($dir);
$images = array();
array().sort();
$matches = NULL;
foreach ($files as $file) {
if (preg_match('/^(.+)_Low.jpg$/', $file, $matches)) {
$images[] = $matches[1];
}
}
foreach ($images as $image) {
echo '<div class="cbp-item"><a class="cbp-caption fancybox-media" data-rel="portfolio" href="' . $dir . $image . '.jpg"> <div class="cbp-caption-defaultWrap"><img src="' . $dir . $image . '_Low.jpg" alt="" /></div>';
}
?>
如果我们希望只为图像添加一个 URL，在foreach中为它们的拇指添加一个 URL，我们也许能够定义一个 $html 变量并逐步添加到它，然后我们最终会echo它，我们的代码看起来像：
<?php
$html = '<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans titre</title>
</head>
<body>';
$html .= '<ul>';
$dir = './style/images/art/mairie/';
$files = scandir($dir);
$images = array();
$nb = 1;
foreach ($files as $file) {
if (fnmatch('*.jpg', $file)) {
$images[] = $file;
}
}
foreach ($images as $key => $image) {
if ($key % 2 == 0) {
$html .= '<div class="cbp-item">
<a class="cbp-caption fancybox-media" data-rel="portfolio" href="style/images/art/mairie/' . $image . '">
<div class="cbp-caption-defaultWrap"><img src="style/images/art/mairie/' . $images[$key + 1] . '" alt="" /> </div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title"><span class="cbp-plus"></span></div>
</div>
</div>
</div>
</a>
</div>';
}
}
$html .= '</ul></body></html>';
echo $html;
修改
我们在这里修改的是添加一个每隔一段时间运行的if。
if ($key % 2 == 0) {
}
我们在foreach中添加$key var，最后我们有两个图像链接，我们将其中一个替换为 $images[$key+1] ，其中一个用于拇指：
-
$image -
$images[$key+1]