HTML - 显示多个图像（可能带有按钮）

Question

好的，所以我为包含多个图像的模型创建了一个投资组合页面，但我想使用特定的 HTML 脚本添加更多图像。作为一名程序员，我试图消除冗余，但我对 JavaScript 或 PHP 却一无所知。

我想要什么：

• 遍历目录 (./images) 中的每个图像文件
• 循环一个特定的 HTML 块，插入图像的路径。

奖金

• 按下按钮时执行代码，在当前窗口中显示更多图像（即“投资组合”按钮 -> Extend.php）。

我的网站：ChrisNguyen.ml/Portfolio

示例代码（上面链接中的原始 HTML 中的其他示例）：

<?php
$dirname = "images_all";
$images = glob($dirname."*.png");

foreach($images as $image) {
    echo '<article class="4u 12u$(xsmall) work-item">
        <a href="'.$image'" class="image fit thumb"><img src="'.$image'" alt="" /></a>
        <h3> </h3>
    </article> ';
}
?>

需要重复的HTML块：

    <article class="4u 12u$(xsmall) work-item">
        <a href="images/fulls/01.jpg" class="image fit thumb"><img src="images/fulls/01.jpg" alt="" /></a>
        <h3> </h3>
    </article>

其他信息： 在 AWS EC2 上运行的 LAMP 服务器（所以我可以使用 PHP 等）

如果你没有得到它：

1. 如何使用“For 循环”以 HTML 格式显示多个图像？
2. 如何使用 Button 显示更多图片。

更新： 由于页面底部的 SMTP 表单，它确实支持 PHP。

更新 2： 我正在实施您的所有建议（谢谢！），并修改 HTML 页面和其他文件，并使用实时服务器/站点对其进行测试。我确实看到了页面的变化，但没有看到想要的结果（即页面显示变量名称而不是值“{$dirArray[$index]}”）

Answer 1

如果我正确理解了您的问题（这只是一个简单而简短的代码示例，希望对您有所帮助）：

第一个问题：1.) 如何使用“For 循环”以 HTML 格式显示多张图片？

在此代码示例中，“images”文件夹中的所有图像都将显示在网站上。

<?php
$path = "";

$allImages= scandir($path);

foreach ($allImages as $image) { 

        $imageInf= pathinfo($path ."/".$image); 

            echo "
            <article class='4u 12u$(xsmall) work-item'>
            <a href='#' class='image fit thumb'><img src='".$imageInf['dirname']."/".$imageInf['basename']."' alt='' /></a>
            <h3> </h3>
            </article> 
            ";
}
    ?>

第二个问题：2.) 如何用按钮显示更多图片

仅适用于 PHP： 这个脚本会在你的网站上再显示一张图片（我不知道你需要多少张图片或者你需要哪个特定的图片）

<?php
if(isset($_POST['NAMEOFBUTTON']))
{

                echo "
                <article class='4u 12u$(xsmall) work-item'>
                <a href='#' class='image fit thumb'><img src=' (IMAGE PATH WITH IMAGE NAME) ' alt='' /></a>
                <h3> </h3>
                </article> 
                ";
}

?>

或

<?php
if(isset($_POST['NAMEOFBUTTON']))
{
      for ($i = 1; $i <= 10; $i++) {
      $var_name = "IMAGENAME".$i;
                    echo "
                    <article class='4u 12u$(xsmall) work-item'>
                    <a href='#' class='image fit thumb'><img src=' (IMAGE PATH WITH $var_name) ' alt='' /></a>
                    <h3> </h3>
                    </article> 
                    ";
       }
}

?>

或

if(isset($_POST['NAMEOFBUTTON']))
{
    $path = "";

    $allImages= scandir($path);

    foreach ($allImages as $image) { 

            $imageInf= pathinfo($path ."/".$image); 

                echo "
                <article class='4u 12u$(xsmall) work-item'>
                <a href='#' class='image fit thumb'><img src='".$imageInf['dirname']."/".$imageInf['basename']."' alt='' /></a>
                <h3> </h3>
                </article> 
                ";
}
}



?>
<form method='post'>
<input type='submit' name='NAMEOFBUTTON' />
</form>

OR WITH JQuery;

HTML：

<input type='button' onclick='moreimg();' />
<div id='Show_Images'></div>

JQUERY：

<script>
function moreimg(){
   $('#Show_Images').load('IMG.php');
}
</script>

PHP： 您可以在文件“IMG.php”中使用 First Question

中的代码

Answer 2

所以上面的答案是正确的。但是，它在当前使用的服务器 (Apache) 中不起作用/执行，因为服务器无法识别 HTML 本身中的 PHP。这就是为什么它只能作为一个单独的文件工作。 [How do I add PHP code/file to HTML(.html) files?]

我需要做什么：

1. 找到“httpd.conf”所在的目录。在我的 AWS Apache 服务器上，它位于“/etc/httpd/conf”
2. 暂时停止您的服务器（“sudo service httpd stop”）
3. 编辑文件（“sudo nano httpd.conf”）
4. 追加“AddType application/x-httpd-php .htm .html”告诉Apache/the-server如何正确执行嵌入的PHP（我放在底部）
5. 还请按照此处的说明确保 httpd.conf 文件将接受/执行上述行/代码 [Use .htaccess file on an apache localhost server]
6. 启动您的服务器（“sudo service httpd stop”）
7. ...如果您的 PHP 正确且嵌入正确，您的页面现在将正常执行 PHP！

检查我的网站 (ChrisNguyen.ml/Portfolio) 以获取最终结果/代码。

Answer 3

现在从$image 中删除美元符号，并在下面的代码中使用。它可能会对你有所帮助。

<?php
$dirname = "images_all";
$images = glob($dir`enter code here`name."*.png");

foreach($images as image) {
    echo '<article class="4u 12u$(xsmall) work-item">
        <a href="'.$image'" class="image fit thumb"><img src="'.$image'" alt="" /></a>
        <h3> </h3>
    </article> ';
}
?>