Question

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

我想要的是什么：

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

奖金

按下按钮时执行代码，在当前窗口中显示更多图像（即“投资组合”按钮 - ＆gt; 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等）

如果你没有得到它：

如何使用“For loop”显示带有HTML的多个图像？
如何使用Button显示更多图像。

更新它支持PHP，因为页面底部有SMTP表单。

更新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： 这个脚本会在你的网站上再显示一个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> 
                ";
}

?>

OR

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

?>

OR

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）中无法工作/执行，因为服务器无法识别HTML本身的PHP。这就是为什么它只作为一个单独的文件工作。 [How do I add PHP code/file to HTML(.html) files?]

我需要做什么：

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

检查我的网站（ChrisNguyen.ml/Portfolio）以获取完成的结果/代码。

Answer 3

现在从$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 - 显示多个图像（可能带有按钮）

3 个答案: