javascript - PHP 将文件中的图像添加到产品页面

Question

因此，我正在努力创建一个产品库，客户可以在其中查看产品的多个图像。因此，在产品页面上，它当前只有一张图像，但是我想展示产品的不同 Angular ，这就是为什么我添加了另外三张图像。我想知道如何从文件夹中获取第二个、第三个和第四个图像，如果没有图像则不显示任何内容。例如:此代码片段在大文件夹中显示产品 157.jpg。我想通过将 157.jpg 更改为 157_1.jpg 来重组我的文件夹以使其正常工作。

*/images/large/<?=$prod_id?>.jpg*

新文件夹结构的示例:

显示产品的代码

<div id="wrapper">
  <?php include ("includes/header.php") ?>
    <ul id="breadcrumbs">
        <li><a href="/">Home</a></li>
        <li> &rsaquo; <a href="/<?=$cat_name_slug?>"><?=$cat_name?></a></li>
        <li> &rsaquo; <?=$page_title?></li>
    </ul>
    <?php include ("includes/left-content.php") ?>
    <div id="main">
      <div id="prod-details-img">
          <?php
      if ($warranty >= 2) {
        echo '<div class="prod-details-warranty">' . $warranty . ' Years Warranty</div>';
      }
      ?>
          <div></div>
          <img src="/images/large/<?=$prod_id?>.jpg" alt="<?=$prod_title?>" />

          <div class="row">
            <div class="column">
              <img src="/images/large/<?=$prod_id?>.jpg" style="width:95px; height:95px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
            </div>
            <div class="column">
              <img src="/images/large/<?=$prod_id?>.jpg"style="width:95px; height:95px;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
            </div>
            <div class="column">
              <img src="/images/large/<?=$prod_id?>.jpg" style="width:95px; height:95px;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
            </div>
          </div>

          <div id="myModal" class="modal" style="display: block;">
            <span class="close cursor" onclick="closeModal()">×</span>
            <div class="modal-content">
              <img src="/images/logo.gif" style="width:50%; height:50%; display:block; margin:0 auto; top:10px;">
              <h3 style="text-align:center;"><?=$prod_title?></h3>

              <div class="mySlides" style="display: block;">
                <div class="numbertext">1 / 4</div>
                <img src="/images/xlarge/<?=$prod_id?>.jpg" style="width:95%; height:95%;">
              </div>

              <div class="mySlides" style="display: none;">
                <div class="numbertext">2 / 4</div>
                <img src="/images/xlarge/<?=$prod_id?>.jpg" style="width:95%; height:95%;">
              </div>

              <div class="mySlides" style="display: none;">
                <div class="numbertext">3 / 4</div>
                <img src="/images/xlarge/<?=$prod_id?>.jpg" style="width:95%; height:95%;">
              </div>

              <div class="mySlides" style="display: none;">
                <div class="numbertext">4 / 4</div>
                <img src="/images/xlarge/<?=$prod_id?>.jpg" style="width:95%; height:95%;">
              </div>

              <a class="prev" onclick="plusSlides(-1)">❮</a>
              <a class="next" onclick="plusSlides(1)">❯</a>

              <div class="caption-container">
                   <p id="caption"></p>
              </div>  

              <div class="column2">
                <img class="demo cursor active" src="/images/large/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(1)">
              </div>
              <div class="column2">
                <img class="demo cursor" src="/images/large/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(2)">
              </div>
              <div class="column2">
                <img class="demo cursor" src="/images/large/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(3)">
              </div>
              <div class="column2">
                <img class="demo cursor" src="/images/large/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(4)">
              </div>
            </div>
          </div>
        </div>
        <div id="prod-details">
          <h1 class="prod-title-large"><?=$prod_title?></h1>
            <span id="prod-details-delivery">
            <img class="price-prom-sml" src="/images/price-promise.gif" alt="Price Promise" /><br />
            Price includes VAT &amp; Delivery<br />Order before 1pm for Free Next Day Delivery <br/>(UK Mainland Only)*</span>
            <div id="prod-details-buy">
              £<?=$price_final?>
                <?php if ($stock == "TRUE"):?>
                <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
                    <input type="hidden" name="Auto_ID" value="<?=$prod_id?>" />
                    <input type="hidden" name="QTY" value="1" />
                    <button type="submit" name="Add_Basket" id="buy-btn">Buy</button>
                </form>
        <?php else: ?>
                <br />Out of Stock
                <?php endif; ?>
            </div>
        </div>

Answer 1

您可以使用 glob() 获取与图像文件夹中的模式匹配的所有文件的数组。

foreach (glob('/images/large/*.jpg') as $filename) {
    //display image
}

参见http://php.net/manual/en/function.glob.php