Question

我尝试用2张图片动态填充HTML页面，第一张是完整图片，第二张是缩小图片，但是由于我无法使用foreach进行AND操作。

事实上，代码还可以，但是我想用相同文件夹的两张图片填充HTML；但是这段代码会带回所有图片，这与“完整图片”和“缩略图”之间没有区别。

脚本带回所有图片。我的文件夹中包含带有特定标题的图像：

runner.getLocation().trim()

我希望能够修改我的代码以在第一行中插入完整内容，在第二行中插入缩略图。

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";



}   


?>

$ images

我的<div class="cbp-caption-defaultWrap"><img src="style/images/art/mairie/Maurine_Tric-7399_Low.jpg" alt="" /> </div>数组的一部分看起来像这样：

$images

所需的输出

我正在尝试在数组中添加带有大图像的URL，并为其他URL添加缩略图，并以$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", ];加以区分：

_Low

Answer 1

如果我们只想在foreach中为图像添加一个URL，为拇指添加一个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) {

}

我们在$key中添加foreach var，最后有两个图像链接，我们用$images[$key+1]替换了其中的一个，其中的一个用于拇指：

$image
$images[$key+1]

Answer 2

只需使用preg_match()而不是fnmatch()，仅匹配缩略图图像并将之前 _Low.jpg的部分标记为Subpattern。然后，您可以轻松地从该存根构造两个图像的文件名：

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

?>

如何遍历具有混合图像和缩略图的数组？

$ images

所需的输出

2 个答案:

修改