HTML

Question

好的，我已经为包含多张图片的模型创建了一个作品集页面，但我想使用特定的 HTML 脚本添加更多图片。作为一名程序员，我试图消除冗余，但我对JavaScript或PHP一无所知。

我想要的：

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

奖金

按下按钮时执行代码，在当前 window 内显示更多图像（即 "Portfolio" 按钮 -> Extend.php）。

我的网站：ChrisNguyen。ml/Portfolio

示例代码（上面link中原始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>

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

万一你没听懂：

如何使用 "For loop" 显示 HTML 的多个图像？
如何使用按钮显示更多图像。

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

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

Answer 1

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

第一个问题：1.) 如何使用 "For loop" 显示 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: 此脚本将在您的网站上再显示一个 img（我不知道您需要多少张图片或您需要哪个特定的 img）

<?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>

或与 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" 中使用 第一个问题

中的代码

Answer 2

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

我需要做的事情：

找到 "httpd.conf" 所在的目录。在我的 AWS Apache 服务器上，它位于“/etc/httpd/conf”
暂时停止您的服务器 ("sudo service httpd stop")
编辑文件（"sudo nano httpd.conf"）
附加"AddType application/x-httpd-php .htm .html"告诉Apache/the-server如何正确执行嵌入PHP（我放在最下面）
同时按照此处的说明确保 httpd.conf 文件将 accept/execute 上述 line/code [ Use .htaccess file on an apache localhost server ]
启动你的服务器（"sudo service httpd stop"）
...如果您的 PHP 正确且嵌入正确，您的页面现在将正常执行 PHP！

查看我的站点 (ChrisNguyen.ml/Portfolio) 以获取已完成的 result/code.

Answer 3

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

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

HTML - 显示多张图片（可能带有按钮）

HTML - Display Multiple Images (possibly with Button)

javascript

php

lamp

image